使页眉和页脚文件包含在多个 html 页面中
Posted
技术标签:
【中文标题】使页眉和页脚文件包含在多个 html 页面中【英文标题】：Make header and footer files to be included in multiple html pages 【发布时间】：2013-09-13 18:35:32 【问题描述】：我想创建包含在多个 html 页面中的通用页眉和页脚页面。
我想使用 javascript。有没有办法只使用 html 和 JavaScript 来做到这一点？
我想在另一个 html 页面中加载页眉和页脚。
【问题讨论】：
你正在寻找 ajax... $('.myElement).load('urltopage.html');这将在 .myElement 中加载 urltopage.html 的内容 ***.com/a/8592403/896341 【参考方案1】：您可以使用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的功能在新版谷歌浏览器或IE中不起作用，原因：安全！
有时我想知道没有 jQuery 的人怎么能呼吸。或者已经有.breathe(in) 和.breathe(out) 了？任何脚本语言在这里都是矫枉过正的。
当我在 chrome 中运行时，我不断收到 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
需要在服务器中运行代码。这意味着 url 需要像“http://.....”。
爱国是对的，它必须在Web服务器下运行。【参考方案2】：
我使用 Server Side Includes 将常用部分添加为页眉和页脚。不需要 HTML 和 JavaScript。相反，网络服务器会在执行任何其他操作之前自动添加包含的代码。
只需在要包含文件的位置添加以下行：
<!--#include file="include_head.html" -->
【讨论】：
我喜欢这种老式的方式。事实上，使用脚本来做这么简单的动作似乎并没有太多好处。 实际上，使用脚本包含文件有很大的缺点：它会降低性能，因为客户端需要下载主页，加载 DOM，运行脚本，然后才能下载包含的文件，这每个包含的文件都需要一个额外的服务器请求。使用服务器端包含包含文件在第一个服务器请求期间为所有元素提供服务，不需要客户端操作。 SSI 要求使用以下文件扩展名：.shtml、.stm、.shtm。它适用于 Apache、LiteSpeed、nginx、lighttpd 和 IIS。
@ubershmekel 正如你所说，相关的网络服务器支持 SSI。文件扩展名不限于.shtml、.stm 和.shtm：在 IIS 上，所有解析的文件都可能包含 SSI，例如.aspx。如果使用 php，则需要使用 PHP include 或 virtual 命令来实现相同的结果。
哪个网络服务器？【参考方案3】：
您必须在 JavaScript 中使用 html 文件结构吗？您是否考虑过改用 PHP，以便可以使用简单的 PHP 包含对象？
如果您将 .html 页面的文件名转换为 .php - 然后在每个 .php 页面的顶部，您可以使用一行代码来包含 header.php 中的内容
<?php include('header.php'); ?>
在每个页面的页脚中执行相同操作以包含来自您的 footer.php 文件的内容
<?php include('footer.php'); ?>
不需要 JavaScript / Jquery 或其他包含的文件。
NB 您也可以使用 .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]
【讨论】：
@Justin808 - OP 没有提到本地托管安装，所以我推测他在谈论基于服务器的文件。 @Sol 但是 OP DID 特别提到想要使用 Javascript，所以你的答案是题外话。全栈 Web 开发正在迅速远离使用 PHP，Node.js 提供了所有等效功能，并且只需要使用 Javascript。 TL;DR 请按要求回答问题。 OP想要一个JS解决方案，所以给他一个解决方案PHP，Ruby，Python，C++或任何其他语言是不合适的。【参考方案4】：你也可以输入：(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>【讨论】：
多行可以使用``【参考方案5】：我试过这个： 创建一个文件 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>
工作得很好。
【讨论】：
不错的解决方案，但我认为这会加载 jquery 框架两次，一次用于初始页面加载，第二次在 .load() 方法执行时 - 因为目标页面也包含 jquery。跨度> 【参考方案6】：我一直在使用 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;
);
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 的一个很好的 vanilla javascript 解决方案。原始代码在这里：http://gomakethings.com/ditching-jquery#get-html-from-another-page
【讨论】：
【参考方案7】：我认为，这个问题的答案太陈旧了...目前一些桌面和移动浏览器支持 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 中测试 KO， Firefox 56.0、Edge 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 post 中获得更多示例
【讨论】：
HTML 导入现已弃用。【参考方案8】：2018 年的 Aloha。不幸的是，我没有任何酷炫或未来主义的东西可以与您分享。
然而，我确实想向那些评论说 jQuery load() 方法目前无法正常工作的人指出，他们可能正在尝试在不运行本地 Web 服务器的情况下将该方法用于本地文件。这样做会抛出上面提到的“cross origin”错误，它指定像 load 方法发出的跨源请求只支持http、data或https等协议方案。 （我假设您没有发出实际的跨域请求，即 header.html 文件实际上与您请求它的页面位于同一域中）
因此，如果上述接受的答案不适合您，请确保您运行的是网络服务器。如果您赶时间（并且使用预装了 Python 的 Mac），最快和最简单的方法是启动一个简单的 Python http 服务器。你可以看到做到这一点是多么容易here。
我希望这会有所帮助！
【讨论】：
虽然使用网络服务器会失败，但至少对我来说，只使用 Javascript 的原因是为了更容易开发。【参考方案9】：也可以将脚本和链接加载到标题中。 我将添加它上面的示例之一...
<!--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>
【讨论】：
【参考方案10】：为了使用纯 javascript 进行快速设置并且由于尚未得到答复，您还可以使用 .js 文件将 HTML 的冗余部分 (templates) 存储在变量中并通过 @ 插入987654323@.
backticks 在这里让它变得容易部分这个答案是关于。（你也会想要如果您阅读并测试该答案，请点击反引号 SO Q/A 上的链接）。
在每个页面上保持相同的导航栏示例：
<nav role="navigation">
<a href="/" class="here"><img src="image.png" /></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" /></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 文件一样链接该文件，并在 <nav role="navigation"></nav> 内通过innerHTML 将 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" /></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 内容。
【讨论】：
【参考方案11】：自从第一次提出这个问题以来，另一种可用的方法是使用 reactrb-express（请参阅 http://reactrb.org）这将允许您在客户端使用 ruby 编写脚本，用 ruby 编写的 react 组件替换您的 html 代码。
【讨论】：
op 仅使用 html 和 javascript 询问，但您带他使用 ruby.. :D 哈哈，但很酷的工具人.. 我认为问题的精神是 - 没有服务器端模板语言。这一切都编译成 Javascript，所以我相信它符合问题的意图。【参考方案12】：问题询问关于仅使用 HTML 和 JavaScript。问题是您的 JavaScript 对服务器的第二个请求（请求 header.html“稍后”）是：
慢！
因此，由于速度的原因，这在生产环境中是不可接受的。方法是只导入一个.js 文件并将您的HTML 模板放在这个.js 文件中。因此，在您的 HTML 中，您可以：
<script defer src="header.js"></script>
<header id="app-header"></header>
然后，在您的header.js 中放入您的模板。对这个 HTML 字符串使用反引号：
let appHeader = `
<nav>
/*navigation or other html content here*/
</nav>
`;
document.getElementById("app-header").innerHTML = appHeader;
这还有一个好处，就是您可以根据需要动态地更改模板的内容！ （如果您希望代码干净，我的建议是不要在此 header.js 文件中包含任何其他代码。）
关于速度的解释
在 HTTP/2 世界中，Web 服务器“无法理解”应与特定的 .html 一起发送哪些附加文件（.css、.js 等），并在初始响应中将它们一起发送。但是，如果在您的“原始”.html 中没有导入此 header 文件（因为您打算稍后使用脚本调用它），则最初不会发送它。因此，当您的 Javascript/jQuery 请求它时（这将在很久以后发生，当 HTML 和您的 JavaScript 将被“解释”时），您的浏览器将向服务器发送第二个请求，等待答案，然后执行它的工作。 ..这就是为什么这很慢。您可以使用任何浏览器的开发者工具来验证这一点，并观察header.html 的到来。
因此，作为一般建议（当然有很多例外），如果您关心速度，请将所有附加文件导入原始 .html（或 php）文件中。如果需要，请使用defer。以后不要使用 JavaScript 导入任何文件。
【讨论】：
【参考方案13】：使用 ajax main.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;
);
index.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>
【讨论】：
【参考方案14】：您可以在不使用 JavaScript 的情况下使用 HTML 的对象标记。
<object data="header.html" type="text/html" ></object>
【讨论】：
【参考方案15】：学分：W3 学校How to Include 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>
【讨论】：
之后测试 index.html 时出现白色空白页 至少记下你的source以上是关于使页眉和页脚文件包含在多个 html 页面中的主要内容，如果未能解决你的问题，请参考以下文章