使页眉和页脚文件包含在多个 html 页面中
Make header and footer files to be included in multiple html pages
我想创建包含在多个html页面上的通用页眉和页脚页面。
我想使用javascript。有没有办法只使用 html 和 JavaScript 来做到这一点？
我想在另一个 html 页面中加载页眉和页脚页面。
你可以用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 ，您应该能够单击链接标签。
我使用服务器端包含将公共部分添加为页眉和页脚。不需要 HTML 和 JavaScript。相反，Web 服务器会在执行任何其他操作之前自动添加包含的代码。
只需在要包含文件的位置添加以下行：
<!--#include file="include_head.html" -->
你必须在 JavaScript 中使用 html 文件结构吗？ 您是否考虑过使用 PHP 来代替，以便您可以使用简单的 PHP 包含对象？
如果将.html页的文件名转换为.php - 则在每个.php页的顶部，您可以使用一行代码来包含标题中的内容.php
<?php include('header.php'); ?>
在每个页面的页脚中执行相同的操作，以包含页脚.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>这个问题问的是只使用 HTML 和 JavaScript。问题是，使用 JavaScript 甚至 jQuery 向服务器发出的第二个请求（请求额外的header.html"稍后"）是：
慢！
因此，这在生产环境中是不可接受的。要做的方法是只包含一个.js文件，并仅使用此.js文件提供 HTML 模板。因此，步骤1，在您的HTML中，您可以拥有：
<header id="app-header"></header>
<script async src="header.js"></script>
然后，第 2 步，将您的模板放入您的 header.js .对此 HTML 字符串使用反引号：
let appHeader = `
<nav>
/*navigation or other html content here*/
</nav>
`;
document.getElementById("app-header").innerHTML = appHeader;
这样做还有一个好处，如果需要，您可以动态更改模板的内容，因为它是JavaScript！另外，尝试defer（甚至不尝试）而不是异步，但对用户来说可能看起来更慢 - 这取决于您的其他内容，所以请尝试。只是，不要忘记将script放在header之后.
关于速度的说明
在HTTP/2世界中，Web服务器"取消支持"哪些附加文件（.css，.js等）应该与特定.html一起发送，并在初始响应中将它们完全发送。但是，如果在"原始".html中没有导入此header.html文件（因为您打算稍后使用脚本调用它），则最初不会发送该文件。所以，当你的JavaScript/jQuery请求它时（这将在很久以后发生，当HTML和你的JavaScript将被"解释"时），你的浏览器将向服务器发送第二个请求，等待答案，然后做它的事情......这就是为什么这很慢。您可以使用任何浏览器的开发人员工具验证这一点，并观察稍后推出的header.html。
因此，作为一般建议（当然也有很多例外），如果您关心速度，请将所有附加文件导入原始.html（或php）文件中。如果需要，请使用defer或async。以后不要使用 JavaScript 导入任何文件。
我试过这个：创建文件头.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页面中包含标题.html，例如：
<head>
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script>
$(function(){ $("head").load("header.html") });
</script>
</head>
工作得很好。
在 C#/Razor 中工作，由于我的家用笔记本电脑上没有设置 IIS，我寻找了一个 JavaScript 解决方案，以便在为我们的项目创建静态标记时加载视图。
我偶然发现了一个解释"放弃jquery"方法的网站，它展示了网站上的一种方法完全符合你对普通Jane javascript（帖子底部的参考链接）所追求的。如果您打算在生产中使用它，请务必调查任何安全漏洞和兼容性问题。我不是，所以我自己从来没有研究过。
JS函数
var getURL = function (url, success, error) {
if (!window.XMLHttpRequest) return;
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status !== 200) {
if (error && typeof error === 'function') {
error(request.responseText, request);
}
return;
}
if (success && typeof success === 'function') {
success(request.responseText, request);
}
}
};
request.open('GET', url);
request.send();
};
获取内容
getURL(
'/views/header.html',
function (data) {
var el = document.createElement(el);
el.innerHTML = data;
var fetch = el.querySelector('#new-header');
var embed = document.querySelector('#header');
if (!fetch || !embed) return;
embed.innerHTML = fetch.innerHTML;
}
);
索引.html
<!-- This element will be replaced with #new-header -->
<div id="header"></div>
views/header.html
<!-- This element will replace #header -->
<header id="new-header"></header>
源代码不是我自己的，我只是引用它，因为它是OP的一个很好的vanilla javascript解决方案。 原始代码在这里： http://gomakethings.com/ditching-jquery#get-html-from-another-page
，这个问题的答案太老了......目前，某些桌面和移动浏览器支持 HTML 模板来执行此操作。
我建了一个小例子：
在Chrome 61.0，Opera 48.0，Opera Neon 1.0，Android Browser 6.0，Chrome Mobile 61.0和Adblocker Browser 54.0
中测试正常在 Safari 10.1、Firefox 56.0、Edge 38.14 和 IE 11 中测试 KO
canisue.com 中的更多兼容性信息
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Template Example</title>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="autoload-template.html">
</head>
<body>
<div class="template-container">1</div>
<div class="template-container">2</div>
<div class="template-container">3</div>
<div class="template-container">4</div>
<div class="template-container">5</div>
</body>
</html>
autoload-template.html
<span id="template-content">
Template Hello World!
</span>
<script>
var me = document.currentScript.ownerDocument;
var post = me.querySelector( '#template-content' );
var container = document.querySelectorAll( '.template-container' );
//alert( container.length );
for(i=0; i<container.length ; i++) {
container[i].appendChild( post.cloneNode( true ) );
}
</script>
styles.css
#template-content {
color: red;
}
.template-container {
background-color: yellow;
color: blue;
}
您可以在这篇HTML5 Rocks帖子中获得更多示例
> 2018年的Aloha。不幸的是，我没有什么很酷或未来主义的东西可以与你分享。
然而，我确实想向那些评论说 jQuery load() 方法目前不起作用的人指出，他们可能试图在不运行本地 Web 服务器的情况下将该方法用于本地文件。这样做会抛出上面提到的"跨源"错误，该错误指定跨源请求（例如由 load 方法发出的请求）仅支持http、data 或 https 等协议方案。（我假设您没有发出实际的跨源请求，即标头.html文件实际上与您请求它的页面位于同一域中）
因此，如果上面接受的答案不适合您，请确保您运行的是 Web 服务器。如果你赶时间（并使用预装了Python的Mac），最快和最简单的方法是启动一个简单的Python http服务器。您可以在此处看到这样做是多么容易。
我希望这有帮助！
为了使用纯 javascript 进行快速设置，并且由于尚未回答，您还可以使用 .js 文件将 HTML 的冗余部分（模板）存储在变量中，并将其插入innerHTML 中。
反引号在这里使这个答案变得容易的部分.
（如果您阅读并测试该答案，您还需要点击反引号 SO Q/A 的链接）。
每个页面上保持不变的导航栏示例：
<nav role="navigation">
<a href="/" class="here"><img src="image.png" alt="Home"/></a>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
</nav>
你可以保留在你的HTMl：
<nav role="navigation"></nav>
并在nav.js文件中将<nav>的内容设置为反引号之间的变量：
const nav= `
<a href="/" class="here"><img src="image.png" alt="Home"/></a>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
` ;
现在你有一个小文件，你可以从中检索一个包含HTML的变量。它看起来与包含非常相似.php并且可以轻松更新而不会弄乱它（反引号内的内容）。
您现在可以像任何其他javascript文件一样链接该文件，并通过<nav role="navigation"></nav>内部的var nav innerHTML
let barnav = document.querySelector('nav[role="navigation"]');
barnav.innerHTML = nav;
如果添加或删除页面，则只需更新一次nav.js
基本的HTML页面可以是：
// code standing inside nav.js for easy edit
const nav = `
<a href="/" class="here"><img src="image.png" alt="Home"/></a>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
`;nav[role="navigation"] {
display: flex;
justify-content: space-around;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<!-- update title if not home page -->
<meta name="description" content=" HTML5 ">
<meta name="author" content="MasterOfMyComputer">
<script src="nav.js"></script>
<!-- load an html template through a variable -->
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<nav role="navigation">
<!-- it will be loaded here -->
</nav>
<h1>Home</h1>
<!-- update h1 if not home page -->
<script>
// this part can also be part of nav.js
window.addEventListener('DOMContentLoaded', () => {
let barnav = document.querySelector('nav[role="navigation"]');
barnav.innerHTML = nav;
});
</script>
</body>
</html>这个快速示例有效，可以复制/粘贴然后编辑以更改变量名称和变量HTML内容。
也可以将脚本和链接加载到标头中。我将添加上面的示例之一...
<!--load_essentials.js-->
document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />');
document.write('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />');
document.write('<script src="js/jquery.js" type="text/javascript"></script>');
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>
自从这个问题第一次被提出以来，另一种可用的方法是使用 reactrb-express（见 http://reactrb.org） 这将允许您在客户端用 ruby 编写脚本，用用 ruby 编写的 react 组件替换您的 html 代码。
使用 ajax
主.js
fetch("./includes/header.html")
.then(response => {
return response.text();
})
.then(data => {
document.querySelector("header").innerHTML = data;
});
fetch("./includes/footer.html")
.then(response => {
return response.text();
})
.then(data => {
document.querySelector("footer").innerHTML = data;
});
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Liks</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header></header>
<main></main>
<footer></footer>
<script src="/js/main.js"></script>
</body>
</html>
你可以使用 HTML 的对象标签而不使用 JavaScript。
<object data="header.html" type="text/html" height="auto"></object>
学分 ： W3 学校 如何包含HTML
保存要包含在.html文件中的 HTML：
内容.html
<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>
包括 HTML
包含 HTML 是通过使用 w3-include-html 属性完成的：
例
<div w3-include-html="content.html"></div>
添加 JavaScript
HTML 包含由 JavaScript 完成。
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
}
</script>
调用页面底部的includeHTML（）：
例
<!DOCTYPE html>
<html>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
</script>
<body>
<div w3-include-html="h1.html"></div>
<div w3-include-html="content.html"></div>
<script>
includeHTML();
</script>
</body>
</html>
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 导入jQuery脚本获胜'我不处理html文件
- 生成pdf或其他非html文件时的错误处理
- 如果使用javascript函数屏幕太小，我该如何更改HTML文件的背景色
- html文件中的script标记根本不起作用
- 从单独的html文件预览Javascript文本
- 从Chrome扩展名中的popup.html文件在background.js文件中运行一个函数
- Android在webview中加载带有javascript的html文件，得到Uncaught ReferenceEr
- 什么更好?使用iframe或jQuery之类的东西在外部网站中加载HTML文件
- 当我在浏览器中打开HTML文件时，javascript不起作用
- 如何在另一个html文件的框架中包含图像
- 压缩静态HTML文件中的JS和CSS
- 从HTML文件中的TypeScript(.ts）获取值
- 以HTML文件中的编码形式脱机存储图像
- ionic幻灯片框中的每张幻灯片都有不同的HTML文件
- 加载具有特定CSS的HTML文件
- 使用Gulp手柄部分编译为单个HTML文件
- 使用javascript检查服务器上是否存在html文件
- 如何使用HtmlWebpackPlugin将已编译的Stylus捆绑包注入html文件
- 上传R-animation包生成的html文件到wordpress
