別の HTML ファイルに HTML ファイルを含める
この記事では、HTML ファイルを HTML ファイルに含める方法を紹介します。
jQuery の load() メソッドを使用して、HTML ファイルを HTML ファイルに含めます
jQuery の load() メソッドを使用すると、サーバーからデータを読み込むことができます。選択したコンテナにデータが表示されます。load() メソッドを使用して、現在の HTML ファイルに別の HTML ファイルを含めることができます。load() メソッドの構文は次のとおりです。
.load(url, data, callback);
load() メソッドは、ロードされる URL を最初のパラメーターとして受け取ります。他に 2つのパラメータ、data と callback 関数があり、これらはオプションです。パラメータ data は、リクエストの処理中にサーバーに送信されるデータです。load() メソッドが完了すると、callback 関数が実行されます。
jQuery を実行するには、HTML の script タグで jQuery CDN を使用する必要があります。たとえば、CDN に移動し、最新バージョンの jQuery で縮小オプションを選択します。その後、コードをコピーして index.html ファイルに貼り付けます。次に、HTML で ID anotherContent の div を作成します。次に、p タグを作成し、This is from index.html というテキストを記述します。lake.html という名前の別の HTML ファイルを作成し、This is from lake.html という段落を記述します。index.html に jQuery 関数を記述します。ID anotherContent を選択し、パラメーターとして lake.html を指定して load() メソッドを呼び出します。
ファイル index.html を実行すると、This is from lake.html というテキストも表示されます。ただし、HTTP サーバーからファイル index.html を実行する必要があります。ローカルの file サーバーを使用して現在のファイルに別のファイル（この場合は lake.html）を含めると、クロスオリジンリクエストはブロックされます。この問題を解決するために、index.html ファイルのディレクトリから次の python コマンドを使用して HTTP サーバーを作成できます。
python3 -m SimpleHTTPServer 1337
次に、http://localhost:1337 から Web ページにアクセスできます。したがって、jQuery を使用して、現在の HTML ファイルに別の HTML ファイルを含めることができます。
サンプルコード：
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<script>
$(function(){
$("#anotherContent").load("lake.html");
});
</script>
<div id="anotherContent"></div>
<p>This is from index.html</p>
<p> This is from lake.html</p>
出力：
This is from lake.html
This is from index.html
JavaScript を使用して HTML ファイルを HTML ファイルに含める
JavaScript を使用して、HTML ファイルに HTML を含めることができます。jQuery を使用してこのメソッドを使用する利点は、ファイルのサイズを小さくする jQuery ファイルをロードする必要がないことです。JavaScript のテンプレートリテラルを使用して HTML を記述できます。JavaScript ファイルを HTML ファイルに含め、HTML を JavaScript ファイルに書き込むことで、目標を達成できます。
たとえば、index.hmtl ファイルで、script タグの src 属性を使用して lake.js ファイルをリンクします。本文のセクションに、This is from index.html というテキストを入力します。lake.js ファイルで、document.write() を使用して HTML を記述します。テンプレートリテラルを使用して、メソッド内に HTML を記述します。つまり、HTML コンテンツをバッククォートでラップします。メソッド内に p タグを記述し、テキストこれは lake.js の HTML ですを記述します。
出力セクションでは、両方のファイルからのテキストを確認できます。したがって、JavaScript を使用して HTML ファイルに HTML を含めることができます。
サンプルコード：
<head>
<script src="lake.js "></script>
</head>
<body>
<p>This is from index.html</p>
</body>
document.write(`
<p>This is HTML from lake.js</p>
`);
出力：
This is HTML from lake.js
This is from index.html
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn