stackoverflow 上的一个问题：
在 HTML 文件中包含另一个 HTML 文件
我正在尝试并想出了一个干净的方法来做到这一点：
1) 使用 fetch() 读取文件内容
2) 从字符串渲染 DOM 节点
3) 替换 <script>;带有 DOM 节点的标签。</script>
删除 HTML 规范第 4.12.1.1 处理模型中提到了标签，因此替换似乎符合规范。
<!-- another-html-file.html --> <h1>Another HTML file</h1>
脚本标签将被替换为 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中文网其他相关文章！
