몰입형 리더용 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);