如何為沈浸式閱讀程式準備 HTML 內容
本文會說明如何建構 HTML 並擷取其內容,以便沉浸式閱讀程式使用。
準備 HTML 內容
將您想要在沈浸式閱讀程式中呈現的內容放進容器元素中。 請確定該容器元素具有唯一的 id
。 若要深入瞭解沉浸式閱讀程式如何支援基本的 HTML 元素,請參閱 SDK 參考。
<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);