使用 JavaScript 載入外部 HTML 檔案
Mehvish Ashiq
2023年1月30日
2022年5月10日
有時，我們必須根據專案要求，使用 JavaScript 或 jQuery 將外部 HTML 檔案載入到另一個 HTML 檔案中。本教程舉例說明如何使用 JavaScript 和 jQuery 載入外部 HTML 檔案。
使用 JavaScript fetch() 方法載入外部 HTML 檔案
HTML 程式碼 (home.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
</head>
<body>
<p>This content is loaded from the home page</p>
</body>
</html>
HTML 程式碼 (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="./script.js"></script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<button onclick="loadHTML()">
Click to load content from home.html file
</button>
<div id="homePage">
<p>The content from Home Page will be displayed here</p>
</div>
</body>
</html>
CSS 程式碼（styles.css）：
div{
border: 2px solid rgb(255, 0, 0);
width: fit-content;
margin: 5px;
padding: 2px 20px;
cursor: pointer;
}
button{
margin: 5px;
padding: 2px 20px;
}
p{
font-size: 14px;
}
JavaScript 程式碼（script.js）：
function loadHTML(){
fetch('home.html')
.then(response=> response.text())
.then(text=> document.getElementById('homePage').innerHTML = text);
}
輸出：
fetch() 函式請求伺服器在各種網頁上載入資料。
我們使用 fetch() 函式從 localhost 獲取 home.html 檔案。fetch() 方法返回一個 Promise。
此外，使用了 Response 介面的 text() 方法，該方法接受 Response 流，讀取它並返回一個 Promise，該 Promise 使用 String 解決。請記住，Response 是使用 UTF-8 解碼的。
之後，我們使用 getElementById() 方法獲取 id 為 homePage 的元素，並通過 .innerHTML 屬性將其內部 HTML 替換為 text。
使用 jQuery load() 方法載入外部 HTML 檔案
HTML 程式碼 (home.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
</head>
<body>
<p>This content is loaded from the home page</p>
</body>
</html>
HTML 程式碼 (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="./script.js"></script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div id="homePage">
Home Page
<p>Click to load content from <b>home.html</b> file</p>
</div>
</body>
</html>
CSS 程式碼（styles.css）：
div{
border: 2px solid rgb(255, 0, 0);
width: fit-content;
margin: 20px auto;
padding: 2px 20px;
cursor: pointer;
}
p{
font-size: 14px;
}
JavaScript 程式碼（script.js）：
$(document).ready(function () {
$('#homePage').click(function () {
$(this).load('home.html');
});
});
輸出：
ready() 方法檢查檔案是否完全準備好。此事件僅在文件物件模型已完全載入時發生。
load() 方法從伺服器載入資訊（資料），並將伺服器返回的資料獲取到指定元素中。
我們使用 ready() 方法來確保 DOM 在進一步操作之前完全準備好。home.html 檔案將使用 load() 方法載入。
Author: Mehvish Ashiq
