使用 JavaScript 加载外部 HTML 文件

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 使用 JavaScript fetch() 方法加载外部 HTML 文件
  2. 使用 jQuery load() 方法加载外部 HTML 文件
使用 JavaScript 加载外部 HTML 文件

有时,我们必须根据项目要求,使用 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);
}

输出:

使用 javascript 加载外部 html 文件 - 获取输出

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');
   });
});

输出:

使用 javascript 加载外部 html 文件 - 加载输出

ready() 方法检查文件是否完全准备好。此事件仅在文档对象模型已完全加载时发生。

load() 方法从服务器加载信息(数据),并将服务器返回的数据获取到指定元素中。

我们使用 ready() 方法来确保 DOM 在进一步操作之前完全准备好。home.html 文件将使用 load() 方法加载。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相关文章 - JavaScript HTML