使用 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
