파일에서 HTML 조각 삽입

Stackoverflow에 대한 질문:

HTML 파일에 다른 HTML 파일 포함

저는 여기저기 놀다가 다음을 사용하여 깔끔한 방법을 생각해냈습니다.
1) fetch()로 파일 내용 읽기
2) 문자열에서 DOM 노드 렌더링
3) <script> DOM 노드를 제자리에 태그하세요.</script>

제거 태그는 HTML 사양 para 4.12.1.1 처리 모델에 언급되어 있으므로 교체는 사양에 따른 것으로 보입니다.

구조

다른 HTML 파일

<!-- another-html-file.html -->
<h1 id="Another-HTML-file">Another HTML file</h1>

HTML 파일 index.html

스크립트 태그는 another-html-file.html의 내용으로 대체됩니다

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <script>
        (() => {
            const thisScript = document.currentScript
            fetch('./another-html-file.html')
            .then(
                (res) => (
                    res.ok // checking if response is ok
                    ? res.text() // return promise with file content as string
                    : null // return null if file is not found
                )
            )
            .then(
                (htmlStr) => (
                    htmlStr // checking if something is returned
                    ? thisScript.replaceWith(
                        // replace this script tag with the DOM Node created from string
                        document.createRange().createContextualFragment(htmlStr)
                    ) 
                    : thisScript.remove() // fallback to remove script if null is returned
                )
            )
        })()
    </script>

결과

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <h1 id="Another-HTML-file">Another HTML file</h1>

위 내용은 파일에서 HTML 조각 삽입의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!