Modern olvasó JavaScript SDK-referencia (v1.4)

A Modern olvasó SDK tartalmaz egy JavaScript-kódtárat, amellyel integrálhatja a Modern olvasó az alkalmazásba.

A npmwebalkalmazás legújabb stabil buildjének kódtárát használhatja , yarnvagy HTML-elemet <script> is használhat:

<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

Függvények

Az SDK a következő függvényeket teszi elérhetővé:

• ImmersiveReader.launchAsync(token, altartomány, tartalom, beállítások)
• ImmersiveReader.close()
• ImmersiveReader.renderButtons(beállítások)

Funkció: launchAsync

ImmersiveReader.launchAsync(token, subdomain, content, options)elindítja a Modern olvasó egy HTML-elemen iframe belül a webalkalmazásban. A tartalom mérete legfeljebb 50 MB lehet.

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

Válaszok

Promise<LaunchResponse>A Modern olvasó betöltésekor feloldó értéket ad vissza. A Promise feloldás egy LaunchResponse objektumra lesz feloldva.

Kivételek

Ha a Modern olvasó nem töltődik be, a visszaadott Promise értéket hibaobjektummal utasítja el a rendszer.

Funkció: close

ImmersiveReader.close()bezárja a Modern olvasó.

Erre a függvényre például akkor van példa, ha a kilépés gomb rejtett a beállítások beállításával.hideExitButton: true Ezután egy másik gomb (például egy mobilfejléc hátranyilása) meghívhatja ezt a close függvényt, amikor rákattint.

close(): void;

Funkció: renderButtons

A ImmersiveReader.renderButtons(options) Modern olvasó gomb útmutatójának testreszabásához nincs szükség a függvényre.

Ez a függvénystílusok és a dokumentum Modern olvasó gombelemeinek frissítése. Ha options.elements meg van adva, akkor a gombok a megadott elemeken options.elementsbelül jelennek meg. options.elements A paraméter használata akkor hasznos, ha több szakaszt tartalmaz a dokumentumban, amelyeken elindítja a Modern olvasó, és egyszerűbb módot szeretne arra, hogy több gombot jelenítsen meg ugyanazzal a stílussal, vagy egyszerű és konzisztens tervezési mintával szeretné megjeleníteni a gombokat. Ha ezt a függvényt a renderButtons beállításparaméterrel szeretné használni, hívja meg ImmersiveReader.renderButtons(options: RenderButtonsOptions); az oldalbetöltést az alábbi kódrészletben bemutatott módon. Ellenkező esetben a gombok a dokumentum azon elemein belül jelennek meg, amelyek az osztályt immersive-reader-button a Modern olvasó gomb testreszabása című témakörben látható módon jelenítik meg.

// 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});

További megjelenítési lehetőségekért tekintse meg az indítási gomb választható attribútumait. A beállítások használatához adja hozzá a beállítási attribútumok HTMLDivElement bármelyikét a lap HTML-fájljában.

renderButtons(options?: RenderButtonsOptions): void;

renderButtons-beállítások

A Modern olvasó gombok megjelenítésének beállításai.

{
    elements: HTMLDivElement[];
}

Type: HTMLDivElement[]
Required: false

Indítás gomb

Az SDK alapértelmezett stílust biztosít a Modern olvasó indítási gombhoz. A stílus engedélyezéséhez használja az immersive-reader-button osztályattribútumot. További információ: A Modern olvasó gomb testreszabása.

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

Az alábbi választható attribútumokkal konfigurálhatja a gomb megjelenését és megjelenését.

LaunchResponse

A hívás ImmersiveReader.launchAsyncválaszát tartalmazza. A Modern olvasó tartalmazó HTML-elemre iframe mutató hivatkozás a következővel container.firstChildérhető el:

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

Hiba

Hibainformációkat tartalmaz.

{
    code: string;
    message: string;
}

Típusok

Tartalom

A Modern olvasó megjelenítendő tartalmat tartalmazza.

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

title

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

chunks

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

Adattömb

Egyetlen adattömb, amely a Modern olvasó tartalmába kerül.

{
    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"

Támogatott MIME-típusok

Beállítások

Olyan tulajdonságokat tartalmaz, amelyek a Modern olvasó bizonyos viselkedését konfigurálják.

{
    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-beállítások

enum CookiePolicy { Disable, Enable }

Az alábbi beállítások csak tájékoztató jellegűek. A Modern olvasó a beállításokat vagy a felhasználói beállításokat cookie-kban tárolja. Ez a cookiePolicy beállítás alapértelmezés szerint letiltja a cookie-k használatát az EU cookie-megfelelőségi törvényeinek betartása érdekében. Ha újra engedélyezni szeretné a cookie-kat, és vissza szeretné állítani Modern olvasó felhasználói beállítások alapértelmezett funkcióit, a webhelyének vagy alkalmazásának megfelelő hozzájárulásra van szüksége a felhasználótól a cookie-k engedélyezéséhez. Ezután a cookie-k Modern olvasó való újbóli engedélyezéséhez a cookiePolicy beállítást kifejezetten CookiePolicy.Enable értékre kell állítania a Modern olvasó indításakor.

Az alábbi táblázat azt ismerteti, hogy milyen beállításokat tárol a Modern olvasó a cookiePolicy beállítás engedélyezésekor.

Támogatott nyelvek

A Modern olvasó fordítási funkciója számos nyelvet támogat. További információ: Nyelvi támogatás.

HTML-támogatás

Ha a formázás engedélyezve van, a következő tartalom html formátumban jelenik meg a Modern olvasó.

A nem támogatott címkék összehasonlítható módon jelennek meg. A képek és táblák jelenleg nem támogatottak.

Böngészőtámogatás

A Modern olvasó legjobb élményéhez használja az alábbi böngészők legújabb verzióit.

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

Következő lépés