Injecter un extrait HTML du fichier

Une question sur le stackoverflow :

Inclure un autre fichier HTML dans un fichier HTML

Je jouais et j'ai trouvé une façon propre de le faire avec :
1) Lecture d'un contenu du fichier avec fetch()
2) Rendu d'un nœud DOM à partir d'une chaîne
3) Remplacement de <script> balise avec le nœud DOM en place.</script>

Suppression du <script> La balise est mentionnée dans la spécification HTML paragraphe 4.12.1.1 Modèle de traitement, donc son remplacement semble être conforme à la spécification.</script>

Structure

Un autre fichier HTML

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

Fichier HTML index.html

La balise de script sera remplacée par le contenu d'un autre-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>

Résultat

    <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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!