在另一個 HTML 檔案中包含一個 HTML 檔案
本文將介紹在 HTML 檔案中包含 HTML 檔案的方法。
使用 jQuery load() 方法在 HTML 檔案中包含一個 HTML 檔案
jQuery load() 方法允許我們從伺服器載入資料。資料將顯示在選定的容器中。我們可以使用 load() 方法在當前 HTML 檔案中包含另一個 HTML 檔案。load() 方法的語法如下。
.load(url, data, callback);
load() 方法將要載入的 URL 作為第一個引數。它還有另外兩個引數，data 和 callback function，它們是可選的。引數 data 是處理請求時要傳送到伺服器的資料。如果 load() 方法完成，回撥函式 將執行。
要執行 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 訪問我們的網頁。因此，我們可以使用 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。我們可以通過在 HTML 檔案中包含 JavaScript 檔案並將 HTML 寫入 JavaScript 檔案來實現我們的目標。
例如，在 index.hmtl 檔案中，使用 script 標籤中的 src 屬性連結 lake.js 檔案。在正文部分，寫入文字 This is from index.html。在 lake.js 檔案中，使用 document.write() 編寫 HTML。使用模板文字在方法中編寫 HTML。換句話說，用反引號包裹 HTML 內容。在方法中寫入 p 標記並寫入文字 This is HTML from lake.js。
在輸出部分，我們可以看到來自兩個檔案的文字。因此，我們可以使用 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