使页眉和页脚文件包含在多个 html 页面中

我想创建一些包含在 HTML 页面中的常见页眉和页脚页面。

我想使用 JavaScript。有没有办法只使用 html 和 JavaScript 来实现这一点？

我想在另一个 html 页面中加载一个页眉和页脚页面。

539889 次浏览
小开
最佳答案

您可以使用 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时，您应该能够单击链接标记。

小开

我试过了: 创建一个类似于

<!-- 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 页面中包含 标题，比如:

<head>
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script>
$(function(){ $("head").load("header.html") });
</script>
</head>

完全没问题。

小开

你必须使用 HTML 文件结构与 JavaScript？您是否考虑过使用 PHP 来代替 PHP，以便使用简单的 PHP include 对象？

如果将。网页。然后在你的每个。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 _ basic. 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 &copy; " + 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。相反，在做其他事情之前，webserver 会自动添加所包含的代码。

只需添加以下一行，您希望在其中包含您的文件:

<!--#include file="include_head.html" -->
小开

我一直在用 C #/Razor 工作，因为我家里的笔记本电脑上没有 IIS 设置，所以我寻找一个 javascript 解决方案来加载视图，同时为我们的项目创建静态标记。

我偶然发现了一个网站，它解释了“丢弃 jquery”的方法，它展示了一个方法在网站上能够完全达到你想要的效果，简单的 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>

视图/标题

<!-- This element will replace #header -->
<header id="new-header"></header>

源代码不是我自己的，我只是引用它，因为它是一个很好的针对 OP 的普通 javascript 解决方案。原始代码生活在这里: http://gomakethings.com/ditching-jquery#get-html-from-another-page

小开

也可以将脚本和链接加载到头部。 我将添加上面的一个例子..。

<!--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 &copy; " + 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 编写的 response 组件替换 html 代码。

小开

我认为，这个问题的答案已经过时了... ... 目前一些桌面和移动浏览器支持 HTML 模板。

我举了个小例子:

在 Chrome 61.0，Opera 48.0，Opera Neon 1.0，Android Browser 6.0，Chrome Mobile 61.0和 Adblock Browser 54.0中测试 OK
在 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 post

小开

2018年的你好。不幸的是，我没有什么很酷或者未来派的东西可以和你们分享。

然而，我想指出的是，那些评论说 jQuery load()方法目前无法工作的人可能正在尝试使用带有本地文件的方法，而不运行本地 Web 服务器。这样做将抛出上面提到的“交叉原点”错误，该错误指定只支持协议方案(如 http、 data或 https)中的交叉原点请求(如 load 方法发出的请求)。(我假设您没有发出实际的跨源请求，即 header.html 文件实际上与请求它的页面在同一个域中)

所以，如果上面的答案对你不起作用，请确保你正在运行一个网络服务器。如果您赶时间(并且使用预先安装了 Python 的 Mac) ，最快捷、最简单的方法是启动一个简单的 Python http 服务器。你可以看到这是多么容易做到 给你。

希望这个能帮上忙！

小开

学分: W3学校 如何包含 HTML

保存要包含在.HTML 文件中的 HTML:

网址: http://www.Content.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>

在页面底部调用 include HTML () :

例子

<!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>
小开

为了使用普通的 javascript 进行快速设置，并且因为还没有得到回答，您还可以使用 .js文件将多余的 HTML 片段 (范本)存储在一个变量中，并通过 innerHTML将其插入。

回勾 这里是这个答案的 让它容易一点。
(如果你阅读并测试了那个答案，你也可以点击那个反勾的链接，从而得到答案) 。

例如，在每个页面上保持不变的导航栏:

<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 的变量。它看起来非常类似于 include. php，可以很容易地进行更新，而不会搞乱 (背签里面是什么)。

现在可以像链接其他 javascript 文件一样链接该文件，并通过 innerHTML 链接 <nav role="navigation"></nav>中的 var nav

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 内容。

小开

用 Ajax
主要的

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>
小开

问题是关于使用 只有 HTML 和 JavaScript的。问题是，使用 JavaScript 甚至 jQuery (“稍后”请求额外的 header.html)向服务器发出的第二个请求是:

慢点！

因此，这在生产环境中是不可接受的。解决方法是只包含一个 .js文件，并为您的 HTML 模板 只使用这个.js 文件提供服务。因此，在你的 HTML 中你可以有:

<script defer src="header.js"></script>
<header id="app-header"></header>

然后，在你的 header.js中放入你的模板:

let appHeader = `
<nav>
/*navigation or other html content here*/
</nav>
`;
document.getElementById("app-header").innerHTML = appHeader;

这也有好处，您可以更改您的模板 动态的的内容，如果您需要！(如果您希望您的代码是干净的，我的建议是不要在这个 header.js文件中包含任何其他代码。)

关于速度的解释

在 HTTP/2世界中，Web 服务器“理解”哪些附加文件(。CSS.Js 等)应该与一个特定的 .html一起发送，并在初始响应中将它们一起发送。但是，如果在您的“原始”.html中没有导入这个 header.html文件(因为您打算稍后用脚本调用它) ，那么最初就不会发送它。因此，当你的 JavaScript/jQuery 请求它(这将发生很久以后，当 HTML 和你的 JavaScript 将得到“解释”) ，你的浏览器将发送第二个请求到服务器，等待答案，然后做它的东西... 这就是为什么这是缓慢的。您可以验证这一点，使用任何浏览器的开发工具，观察 header.html来得更晚。

因此，作为一般性建议(当然也有很多例外) ，如果您关心速度的话，可以导入原始 .html(或 php)文件中的所有附加文件。如果需要，使用 defer。使用 JavaScript 的 以后不要导入任何文件。


提交答案