我想创建包含在几个html页面中的通用页眉和页脚页面。
我想使用JavaScript。有没有办法只使用html和JavaScript来做到这一点？
我想在另一个html页面中加载页眉和页脚页面。
Answers:
您可以使用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，您应该能够单击链接标记。
local file在新版本的Google Chrome或IE中无法使用，原因：安全！
.breathe(in)和.breathe(out)了吗？在这里，任何脚本语言都是纯洁的。
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.当我在chrome中运行时，我会不断得到提示
我使用Server Side Includes将常见的部分添加为页眉和页脚。不需要HTML，也不需要JavaScript。相反，网络服务器会在执行其他任何操作之前自动添加包含的代码。
只需将以下行添加到要包含文件的位置：
<!--#include file="include_head.html" -->.shtml，.stm，.shtm。它可以在Apache，LiteSpeed，nginx，lighttpd和IIS中使用。
.shtml，.stm和.shtm：在IIS上，所有解析的文件可能包含SSI，例如.aspx。如果使用PHP，则需要使用PHP include或virtual命令来获得相同的结果。
您必须在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]我试过了：创建一个文件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>工作完美。
您还可以输入：（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模板。
我建立了一个小例子：
经过 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，火狐56.0，边缘38.14和IE 11
更多兼容性信息在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帖子中获得更多示例
我一直在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;
}
);index.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的良好的javascript解决方案。原始代码位于此处：http : //gomakethings.com/ditching-jquery#get-html-from-another-page
阿罗哈（Aloha），来自2018年。不幸的是，我没有什么好与未来有关的东西可以与您分享。
但是，我确实要指出那些评论说jQuery load()方法目前不起作用的人，他们可能试图在不运行本地Web服务器的情况下将其与本地文件一起使用。这样做会抛出上述“跨源”的错误，它指定了跨源请求诸如由负载方法制备的仅支持的协议方案等http，data或 https。（我假设您不是在进行真正的跨域请求，即header.html文件实际上与您从中请求页面的域位于同一域中）
因此，如果上面接受的答案对您不起作用，请确保您正在运行Web服务器。如果您急于这样做（并且使用的是预装有Python的Mac），最快，最简单的方法就是启动一个简单的Python http服务器。您可以在这里看到这样做很容易。
我希望这有帮助！
也可以将脚本和链接加载到标题中。我将其添加为以上示例之一...
<!--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代码。
将要包含的HTML保存在.html文件中：
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>调用页面底部的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>