如何為沈浸式閱讀程式準備 HTML 內容

  • 發行項

本文會說明如何建構 HTML 並擷取其內容，以便沈浸式閱讀程式使用。

準備 HTML 內容

將您想要在沈浸式閱讀程式中呈現的內容放進容器元素中。 請確定該容器元素具有唯一的 id。 沈浸式閱讀程式支援基本的 HTML 元素。如需詳細資訊，請參閱參考。

<div id='immersive-reader-content'>
    <b>Bold</b>
    <i>Italic</i>
    <u>Underline</u>
    <strike>Strikethrough</strike>
    <code>Code</code>
    <sup>Superscript</sup>
    <sub>Subscript</sub>
    <ul><li>Unordered lists</li></ul>
    <ol><li>Ordered lists</li></ol>
</div>

在 JavaScript 中取得 HTML 內容

使用容器元素的 id 來取得 JavaScript 程式碼中的 HTML 內容。

const htmlContent = document.getElementById('immersive-reader-content').innerHTML;

使用 HTML 內容啟動沈浸式閱讀程式

呼叫 ImmersiveReader.launchAsync 時，請將區塊的 mimeType 屬性設定為 text/html 以呈現 HTML。

const data = {
    chunks: [{
        content: htmlContent,
        mimeType: 'text/html'
    }]
};

ImmersiveReader.launchAsync(YOUR_TOKEN, YOUR_SUBDOMAIN, data, YOUR_OPTIONS);

後續步驟