如何使用 jQuery 將一個 HTML 檔案包含到另一個 HTML 檔案中？

將HTML 檔案合併到HTML 文件中

在HTML 開發中，經常需要將一個HTML 文件的內容包含到另一個HTML文件中。這允許模組化結構和程式碼可重複使用性。雖然這個任務可以在 JavaServer Faces (JSF) 中使用 輕鬆完成。標籤，純 HTML 檔案需要類似的方法。

利用 jQuery 進行 HTML 包含

此問題的實際解決方案涉及使用 jQuery，一種流行的 JavaScript圖書館。透過利用 jQuery 的強大功能，我們可以動態地將單獨 HTML 檔案的內容載入到父文件中。

HTML 檔案結構

父HTML 檔案（a. html) 應包含以下程式碼：

<script src="jquery.js"></script>
<script>
    $(function() {
        $("#includedContent").load("b.html");
    });
</script>



<div>
<p>在此程式碼中，我們包含jQuery 函式庫並使用$(function() { }) 包裝器，用於在DOM 準備好時執行函數。在此函數中，我們利用 jQuery 的 .load() 方法將「b.html」檔案的內容非同步載入到 </p>
<div> 中。 ID 為「includedContent」的元素。 <p><strong>單獨的 HTML 檔案 (b.html)</strong></p>
<p>包含的 HTML 檔案 (b.html)包含我們希望合併的內容進入父親檔案：</p>
<pre class="brush:php;toolbar:false"><p>This is my include file</p>

這樣做的優點方法

此方法有幾個優點：

• 簡單性：這是一種簡單明了的方法。
• 乾淨的解決方案： 它避免了不必要的 HTML 程式碼混亂
• 動態載入：非同步載入內容，防止頁面阻塞。

文檔

對於關於jQuery 的.load() 方法的更多信息，請參考其官方文檔：jQuery .load() 文件