ファイルから HTML スニペットを挿入する

スタックオーバーフローに関する質問:

HTML ファイルに別の HTML ファイルを含める

私はいろいろ遊んでいて、それを行うためのきれいな方法を思いつきました:
1) fetch()
でファイルの内容を読み取る 2) 文字列
からDOMノードをレンダリングする 3) <script> を置き換えます。タグを配置して DOM ノードを配置します。</script>

<script> の削除タグは HTML 仕様の 4.12.1.1 処理モデルに記載されているため、置き換えは仕様に従っているようです。</script>

構造

別の 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 中国語 Web サイトの他の関連記事を参照してください。