我想创建包含在多个 html 页面中的常见页眉和页脚页面。
我想使用javascript。有没有办法只使用 html 和 JavaScript 来做到这一点？
我想在另一个 html 页面中加载页眉和页脚页面。
使页眉和页脚文件包含在多个 html 页面中
IT技术
javascript
jquery
html
css
2021-01-26 01:30:08
6个回答
您可以使用jquery完成此操作。
将此代码放入 index.html
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>
并将此代码放入header.html和footer.html，与index.html
<a href="http://www.google.com">click here for google</a>
现在，当您访问 时index.html，您应该能够点击链接标签。
我使用Server Side Includes添加公共部分作为页眉和页脚。不需要 HTML 和 JavaScript。相反，网络服务器会在执行任何其他操作之前自动添加包含的代码。
只需在要包含文件的位置添加以下行：
<!--#include file="include_head.html" -->
你必须在 JavaScript 中使用 html 文件结构吗？您是否考虑过改用 PHP 以便可以使用简单的 PHP 包含对象？
如果您将 .html 页面的文件名转换为 .php - 那么在每个 .php 页面的顶部，您可以使用一行代码来包含 header.php 中的内容
<?php include('header.php'); ?>
在每个页面的页脚中执行相同的操作以包含您的 footer.php 文件中的内容
<?php include('footer.php'); ?>
不需要 JavaScript / Jquery 或其他包含的文件。
注意您还可以使用 .htaccess 文件中的以下内容将 .html 文件转换为 .php 文件
# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]
# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
你也可以放：(load_essentials.js:)
document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright © " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:you@you.com'>Contact Us</a> / "
+ "<a href='mailto:you@you.com'>Report a problem.</a></p>";<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>
<script src="load_essentials.js"></script>我试过这个：像创建一个文件header.html
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Your application</title>
现在在您的 HTML 页面中包含header.html，例如：
<head>
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script>
$(function(){ $("head").load("header.html") });
</script>
</head>
工作得很好。