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中文網其他相關文章！
