JavaScript SDK başvurusu (v1.4) Tam Ekran Okuyucu

Tam Ekran Okuyucu SDK'sı, Tam Ekran Okuyucu uygulamanızla tümleştirmenizi sağlayan bir JavaScript kitaplığı içerir.

Web uygulamanıza en son kararlı derleme kitaplığını eklemek için , yarnveya bir HTML <script> öğesi kullanabilirsiniznpm:

<script type='text/javascript' src='https://ircdname.azureedge.net/immersivereadersdk/immersive-reader-sdk.1.4.0.js'></script>

npm install @microsoft/immersive-reader-sdk

yarn add @microsoft/immersive-reader-sdk

İşlevler

SDK şu işlevleri kullanıma sunar:

• ImmersiveReader.launchAsync(belirteç, alt etki alanı, içerik, seçenekler)
• ImmersiveReader.close()
• ImmersiveReader.renderButtons(seçenekler)

Fonksiyon: launchAsync

ImmersiveReader.launchAsync(token, subdomain, content, options)web uygulamanızdaki bir HTML iframe öğesinde Tam Ekran Okuyucu başlatır. İçeriğinizin boyutu en fazla 50 MB ile sınırlıdır.

launchAsync(token: string, subdomain: string, content: Content, options?: Options): Promise<LaunchResponse>;

Döndürülenler

Tam Ekran Okuyucu yüklendiğinde çözümlenen bir Promise<LaunchResponse>döndürür. Bir Promise LaunchResponse nesnesine çözümlenmiş olur.

Özel durumlar

Tam Ekran Okuyucu yüklenemezse, döndürülen Promise bir Error nesnesiyle reddedilir.

Fonksiyon: close

ImmersiveReader.close()Tam Ekran Okuyucu kapatır.

Bu işlev için bir örnek kullanım örneği, çıkış düğmesinin seçeneklerde ayarlanarak hideExitButton: true gizlendiği durumlardır. Ardından, tıklandığında farklı bir düğme (örneğin, bir mobil üst bilginin geri oku) bu close işlevi çağırabilir.

close(): void;

Fonksiyon: renderButtons

ImmersiveReader.renderButtons(options) Tam Ekran Okuyucu düğmesini özelleştirme kılavuzunu kullanırsanız işlev gerekli değildir.

Bu işlev, belgenin Tam Ekran Okuyucu düğme öğelerini stiller ve güncelleştirir. Sağlanırsa options.elements , düğmeler içinde options.elementssağlanan her öğe içinde işlenir. Parametresini options.elements kullanmak, belgenizde Tam Ekran Okuyucu başlatabileceğiniz birden çok bölüm olduğunda ve aynı stile sahip birden çok düğmeyi işlemek için basitleştirilmiş bir yol istediğinizde veya düğmeleri basit ve tutarlı bir tasarım deseniyle işlemek istediğinizde kullanışlıdır. Bu işlevi renderButtons seçenekleri parametresiyle kullanmak için, aşağıdaki kod parçacığında gösterildiği gibi sayfa yüklemesini çağırınImmersiveReader.renderButtons(options: RenderButtonsOptions);. Aksi takdirde, düğmeler belgenin Tam Ekran Okuyucu düğmesini özelleştirme bölümünde gösterildiği gibi sınıfı immersive-reader-button olan öğeleri içinde işlenir.

// This snippet assumes there are two empty div elements in
// the page HTML, button1 and button2.
const btn1: HTMLDivElement = document.getElementById('button1');
const btn2: HTMLDivElement = document.getElementById('button2');
const btns: HTMLDivElement[] = [btn1, btn2];
ImmersiveReader.renderButtons({elements: btns});

Daha fazla işleme seçeneği için başlatma düğmesine isteğe bağlı özniteliklere bakın. Bu seçenekleri kullanmak için sayfa HTML'nizdeki her HTMLDivElement birine seçenek özniteliklerinden herhangi birini ekleyin.

renderButtons(options?: RenderButtonsOptions): void;

renderButtons seçenekleri

Tam Ekran Okuyucu düğmelerini işleme seçenekleri.

{
    elements: HTMLDivElement[];
}

Type: HTMLDivElement[]
Required: false

Başlat düğmesi

SDK, Tam Ekran Okuyucu başlatma düğmesi için varsayılan stil sağlar. immersive-reader-button Bu stili etkinleştirmek için sınıf özniteliğini kullanın. Daha fazla bilgi için bkz. Tam Ekran Okuyucu düğmesini özelleştirme.

<div class='immersive-reader-button'></div>

Düğmenin genel görünümünü yapılandırmak için aşağıdaki isteğe bağlı öznitelikleri kullanın.

LaunchResponse

çağrısından ImmersiveReader.launchAsyncgelen yanıtı içerir. Tam Ekran Okuyucu içeren HTML iframe öğesine başvuruya aracılığıyla container.firstChilderişilebilir.

{
    container: HTMLDivElement;
    sessionId: string;
    charactersProcessed: number;
}

Hata

Bir hata hakkında bilgi içerir.

{
    code: string;
    message: string;
}

Türler

Content

Tam Ekran Okuyucu gösterilecek içeriği içerir.

{
    title?: string;
    chunks: Chunk[];
}

title

Type: String
Required: false
Default value: "Immersive Reader" 

chunks

Type: Chunk[]
Required: true
Default value: null 

Öbek

Tam Ekran Okuyucu içeriğine geçirilen tek bir veri öbekleri.

{
    content: string;
    lang?: string;
    mimeType?: string;
}

content

Type: String
Required: true
Default value: null 

lang

Type: String
Required: false
Default value: Automatically detected 

mimeType

Type: String
Required: false
Default value: "text/plain"

Desteklenen MIME türleri

Seçenekler

Tam Ekran Okuyucu belirli davranışlarını yapılandıran özellikler içerir.

{
    uiLang?: string;
    timeout?: number;
    uiZIndex?: number;
    useWebview?: boolean;
    onExit?: () => any;
    customDomain?: string;
    allowFullscreen?: boolean;
    parent?: Node; 
    hideExitButton?: boolean;
    cookiePolicy?: CookiePolicy;
    disableFirstRun?: boolean;
    readAloudOptions?: ReadAloudOptions;
    translationOptions?: TranslationOptions;
    displayOptions?: DisplayOptions;
    preferences?: string;
    onPreferencesChanged?: (value: string) => any;
    disableGrammar?: boolean;
    disableTranslation?: boolean;
    disableLanguageDetection?: boolean;
}

uiLang

Type: String
Required: false
Default value: User's browser language 

timeout

Type: Number
Required: false
Default value: 15000

uiZIndex

Type: Number
Required: false
Default value: 1000

onExit

Type: Function
Required: false
Default value: null

preferences

Type: String
Required: false
Default value: null

onPreferencesChanged

Type: Function
Required: false
Default value: null

customDomain

Type: String
Required: false
Default value: null

ReadAloudOptions

type ReadAloudOptions = {
    voice?: string;
    speed?: number;
    autoplay?: boolean;
};

voice

Type: String
Required: false
Default value: "Female" or "Male" (determined by language) 
Values available: "Female", "Male"

speed

Type: Number
Required: false
Default value: 1
Values available: 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5

TranslationOptions

type TranslationOptions = {
    language: string;
    autoEnableDocumentTranslation?: boolean;
    autoEnableWordTranslation?: boolean;
};

language

Type: String
Required: true
Default value: null 
Values available: For more information, see the Supported languages section

ThemeOption

enum ThemeOption { Light, Dark }

DisplayOptions

type DisplayOptions = {
    textSize?: number;
    increaseSpacing?: boolean;
    fontFamily?: string;
    themeOption?: ThemeOption
};

textSize

Type: Number
Required: false
Default value: 20, 36 or 42 (Determined by screen size)
Values available: 14, 20, 28, 36, 42, 48, 56, 64, 72, 84, 96

fontFamily

Type: String
Required: false
Default value: "Calibri"
Values available: "Calibri", "Sitka", "ComicSans"

CookiePolicy seçenekleri

enum CookiePolicy { Disable, Enable }

Aşağıdaki ayarlar yalnızca bilgilendirme amaçlıdır. Tam Ekran Okuyucu ayarlarını veya kullanıcı tercihlerini tanımlama bilgilerinde depolar. Bu cookiePolicy seçeneği , AB Çerez Uyumluluğu yasalarına uymak için tanımlama bilgilerinin kullanımını varsayılan olarak devre dışı bırakır . Tanımlama bilgilerini yeniden etkinleştirmek ve Tam Ekran Okuyucu kullanıcı tercihleri için varsayılan işlevselliği geri yüklemek istiyorsanız, web sitenizin veya uygulamanızın tanımlama bilgilerini etkinleştirmek için kullanıcıdan uygun onay alması gerekir. Ardından, Tam Ekran Okuyucu tanımlama bilgilerini yeniden etkinleştirmek için, Tam Ekran Okuyucu başlatırken cookiePolicy seçeneğini cookiePolicy.Enable olarak açıkça ayarlamanız gerekir.

Aşağıdaki tabloda, cookiePolicy seçeneği etkinleştirildiğinde Tam Ekran Okuyucu tanımlama bilgisinde hangi ayarların depolandığı açıklanmaktadır.

Desteklenen diller

Tam Ekran Okuyucu'nin çeviri özelliği birçok dili destekler. Daha fazla bilgi için bkz . Dil desteği.

HTML desteği

Biçimlendirme etkinleştirildiğinde, aşağıdaki içerik Tam Ekran Okuyucu HTML olarak işlenir.

Desteklenmeyen etiketler benzer şekilde işlenir. Görüntüler ve tablolar şu anda desteklenmiyor.

Tarayıcı desteği

Tam Ekran Okuyucu en iyi deneyim için aşağıdaki tarayıcıların en son sürümlerini kullanın.

• Microsoft Edge
• Google Chrome
• Mozilla Firefox
• Apple Safari

Sonraki adım