スタックオーバーフローに関する質問: HTML ファイルに別の HTML ファイルを含める 私はいろいろ遊んでいて、それを行うためのきれいな方法を思いつきました: 1) fetch()でファイルの内容を読み取る 2) 文字列からDOMノードをレンダリングする 3) を置き換えます。タグを配置して DOM ノードを配置します。 の削除タグは HTML 仕様の 4.12.1.1 処理モデルに記載されているため、置き換えは仕様に従っているようです。</p> <h2> 構造 </h2> <p><img src="https://img.php.cn/upload/article/000/000/000/173093868549292.jpg" alt="Inject HTML snippet from file"></p> <h2> 別の HTML ファイル </h2> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!-- another-html-file.html --> <h1>Another HTML file</h1> </pre><div class="contentsignin">ログイン後にコピー</div></div> <h2> HTML ファイルindex.html </h2> <p>スクリプト タグは、another-html-file.html のコンテンツで置き換えられます<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!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 ) ) })()
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
