写在前面：
在 web 开发中，有时我们希望在多个页面中共享相同的头部和底部，以确保一致的用户体验。本教程将向您展示如何使用 HTML 和 JavaScript 动态加载实现这个目标。
步骤1: 创建共享内容的 HTML 文件
首先，我们将共享的头部和底部内容放置在一个单独的 HTML 文件中。我们称其为 head-footer.html 以下是一个基本的结构：
<!-- head -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website Title</title>
<link rel="stylesheet" href="style.css">
<script src="js.js"></script>
<!-- head -->
<!-- footer -->
<footer>
<p>© 2023 Your Website Footer</p>
</footer>
<!-- footer -->步骤2: 在其他页面中使用 JavaScript 动态加载共享内容
在需要使用共享头部和底部的其他 HTML 页面中，我们使用 JavaScript 动态加载 head-footer.js 文件。以下是一个页面的示例，假设我们命名为 index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<script src="head-footer.js"></script>
</head>
<body>
</body>
</html>步骤3: 创建 JavaScript 文件动态加载共享内容
现在，我们创建一个 JavaScript 文件，命名为 head-footer.js 用于异步加载 head-footer.html 文件，并将其内容添加到当前页面的
document.addEventListener('DOMContentLoaded', function () {
// 使用 fetch 异步加载头部内容
fetch('head-footer.html')// 文件名
.then(response => response.text())
.then(html => {
// 创建一个 div 元素，并将加载的头部内容添加到 div 中
const tempDiv = document.createElement('div');
tempDiv.innerHTML = html;
// 获取 head 元素，并将 div 中的元素逐个添加到 head 中
const headElement = document.head;
tempDiv.childNodes.forEach(node => {
headElement.appendChild(node.cloneNode(true));
});
});
// 使用 fetch 异步加载底部内容
fetch('head-footer.html')// 文件名
.then(response => response.text())
.then(html => {
// 创建一个 div 元素，并将加载的底部内容添加到 div 中
const tempDiv = document.createElement('div');
tempDiv.innerHTML = html;
// 获取 body 元素，并将 div 中的元素逐个添加到 body 中
const bodyElement = document.body;
tempDiv.childNodes.forEach(node => {
bodyElement.appendChild(node.cloneNode(true));
});
});
}); 这样，当浏览器加载 index.html 时，它会动态加载 head-footer.html 文件，并将其内容添加到当前页面，实现了共享头部和底部的效果。
总结
通过将共享的头部和底部内容放置在一个 HTML 文件中，并使用 JavaScript 动态加载，我们可以在多个页面中实现一致的用户界面。这种方法简化了维护和更新共享内容的过程，并确保网站的一致性。在实际项目中，您可能需要根据项目结构和需求进行调整。
评论 (0)