从文件中注入 HTML 片段-js教程-PHP中文网

从文件中注入 HTML 片段

Susan Sarandon

发布： 2024-11-07 08:18:03

原创

307 人浏览过

stackoverflow 上的一个问题：

在 HTML 文件中包含另一个 HTML 文件

我正在尝试并想出了一个干净的方法来做到这一点：
1) 使用 fetch() 读取文件内容
2) 从字符串渲染 DOM 节点
3) 替换 <script>;带有 DOM 节点的标签。</script>

删除 HTML 规范第 4.12.1.1 处理模型中提到了标签，因此替换似乎符合规范。

结构

Inject HTML snippet from file

另一个 HTML 文件

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

登录后复制

HTML 文件index.html

脚本标签将被替换为 another-html-file.html 的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
</body>
</html>

登录后复制

结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Another HTML file</h1>
</body>
</html>

登录后复制

以上是从文件中注入 HTML 片段的详细内容。更多信息请关注PHP中文网其他相关文章！