你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

如何为沉浸式阅读器准备 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);

下一步

浏览沉浸式阅读器 SDK 参考