在HTML文件中包含另一个HTML文件
我有2个HTML文件，假设a.html和b.html 。 在a.html我想包含b.html 。
在JSF中，我可以这样做：
<ui:include src="b.xhtml" />
这意味着在a.xhtml文件中，我可以包含b.xhtml 。
我们如何在*.html文件中做到这一点？
在我看来，最好的解决scheme使用jQuery：
a.html ：
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#includedContent").load("b.html"); }); </script> </head> <body> <div id="includedContent"></div> </body> </html>
b.html ：
<p>This is my include file</p>
这个方法对我的问题是一个简单而干净的解决scheme。
jQuery .load()文档在这里 。
我的解决scheme类似于上面的lolo 。 不过，我通过JavaScript的document.write插入HTML代码，而不是使用jQuery：
a.html：
<html> <body> <h1>Put here your HTML content before insertion of b.js.</h1> ... <script src="b.js"></script> ... <p>And here whatever content you want afterwards.</p> </body> </html>
b.js：
document.write('\ \ <h1>Add your HTML code here</h1>\ \ <p>Notice however, that you have to escape LF's with a '\', just like\ demonstrated in this code listing.\ </p>\ \ ');
我反对使用jQuery的原因是，jQuery.js大小约为90kb，我想保持数据量尽可能小。
为了插入转义字符而不需要太多工作，我推荐使用一个简单的正则expression式来匹配整行（ ^.*$ ），并在每行的末尾添加\ 。 例如，你可以像这样在命令行上使用sed ：
sed 's/^.*$/&\\/g;' b.html > escapedB.html
从上面扩展lolo的答案，如果你必须包含大量的文件，这里是一个更加自动化：
<script> $(function(){ var includes = $('[data-include]'); jQuery.each(includes, function(){ var file = 'views/' + $(this).data('include') + '.html'; $(this).load(file); }); }); </script>
然后在html中包含一些东西：
<div data-include="header"></div> <div data-include="footer"></div>
其中将包括文件views / header.html和views / footer.html
通过Html5rocks教程和聚合项目检出HTML5
例如：
<head> <link rel="import" href="/path/to/imports/stuff.html"> </head>
一个简单的服务器端include指令包含在同一文件夹中find的另一个文件，如下所示：
<!--#include virtual="a.html" -->
我写的一个图书馆的无耻插件解决了这个问题。
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
以上将采取/path/to/include.html的内容并将其replace为div 。
一个非常古老的解决scheme ，当时我确实满足了我的需求，但是下面是如何做到符合标准的代码：
<!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html"> <p>backup content</p> </object> <![endif]--> <!--[if !IE]> <--> <object type="text/html" data="some.html"> <p>backup content</p> </object> <!--> <![endif]-->
不需要脚本。 没有必要做任何花哨的东西服务器端（这可能是一个更好的select）
<iframe src="/path/to/file.html" seamless></iframe>
由于旧的浏览器不支持无缝，你应该添加一些CSS来解决它：
iframe[seamless] { border: none; }
请记住，对于不支持无缝的浏览器，如果您单击iframe中的链接，则会使框架转到该url，而不是整个窗口。 一种解决方法是让所有的链接都有target="_parent" ，而浏览器的支持是“足够好”的。
另外，如果你可以访问服务器上的.htaccess文件，你可以添加一个简单的指令，这个指令可以让php解释为以.html扩展名结尾的文件。
RemoveHandler .html AddType application/x-httpd-php .php .html
现在你可以使用一个简单的PHP脚本来包含其他文件，如：
<?php include('b.html'); ?>
如果需要包含来自某个文件的html内容，以下工作需要包含：例如，以下行将在OBJECT定义发生的位置包含piece_to_include.html的内容。
...text before... <OBJECT data="file_to_include.html"> Warning: file_to_include.html could not be included. </OBJECT> ...text after...
参考： http : //www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
要插入指定文件的内容：
<!--#include virtual="filename.htm"-->
大多数的解决scheme工作，但他们有jQuery的问题：
问题是下面的代码$(document).ready(function () { alert($("#includedContent").text()); }什么都不报警，而不是提醒包含的内容。
我写下面的代码，在我的解决scheme中，您可以访问$(document).ready函数中包含的内容：
（关键是同步加载包含的内容）。
index.htm ：
<html> <head> <script src="jquery.js"></script> <script> (function ($) { $.include = function (url) { $.ajax({ url: url, async: false, success: function (result) { document.write(result); } }); }; }(jQuery)); </script> <script> $(document).ready(function () { alert($("#test").text()); }); </script> </head> <body> <script>$.include("include.inc");</script> </body> </html>
include.inc ：
<div id="test"> There is no issue between this solution and jquery. </div>
jquery包括github上的插件
这是对我的帮助。 b.html html代码b.html到a.html ，这应该放到a.html的head标签中：
<script src="jquery-1.10.2.js"></script>
然后在body标签中，一个容器由一个唯一的id和一个javascript块组成，将b.html加载到容器中，如下所示：
<div id="b-placeholder"> </div> <script> $(function(){ $("#b-placeholder").load("b.html"); }); </script>
Athari的答案（第一个！）太确定了！ 很好！
但是，如果你想传递页面的名称作为URL参数 ，这个post有一个很好的解决scheme，可以结合使用：
http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html
所以它变成了这样的东西：
您的url：
www.yoursite.com/a.html?p=b.html
现在， a.html代码变成：
<html> <head> <script src="jquery.js"></script> <script> function GetURLParameter(sParam) { var sPageURL = window.location.search.substring(1); var sURLVariables = sPageURL.split('&'); for (var i = 0; i < sURLVariables.length; i++) { var sParameterName = sURLVariables[i].split('='); if (sParameterName[0] == sParam) { return sParameterName[1]; } } } $(function(){ var pinc = GetURLParameter('p'); $("#includedContent").load(pinc); }); </script> </head> <body> <div id="includedContent"></div> </body> </html>
它为我工作得很好！ 我希望已经帮助:)
目前没有直接的HTML解决scheme。 即使HTML导入 （这是永久草稿 ）不会做的事情，因为导入！=包括和一些JS魔术将需要无论如何。
我最近写了一个VanillaJS脚本 ，只是将HTML包含到HTML中，没有任何复杂性。
只需放置在您的a.html
<link data-wi-src="b.html" /> <!-- ... and somewhere below is ref to the script ... --> <script src="wm-html-include.js"> </script>
它是open-source ，可能会提供一个想法（我希望）
这里有一篇很棒的文章 ，你可以实现公共库，只需使用下面的代码将任何HTML文件导入到一行中。
<head> <link rel="import" href="warnings.html"> </head>
您也可以尝试Google聚合物
你可以用JavaScript的库jQuery来做到这一点：
HTML：
<div class="banner" title="banner.html"></div>
JS：
$(".banner").each(function(){ var inc=$(this); $.get(inc.attr("title"), function(data){ inc.replaceWith(data); }); });
请注意， banner.html应位于其他网页所在的同一个域名下，否则，由于跨源资源共享政策，您的网页将拒绝banner.html文件。
另外，请注意，如果您使用JavaScript加载内容，Google将无法将其编入索引，因此对于search引擎优化原因，这不是一个好方法。
根据https://stackoverflow.com/a/31837264/4360308的答案，我已经用Nodejs（+ express + cheerio）实现了这个function，如下所示：
HTML（index.html）
<div class="include" data-include="componentX" data-method="append"></div> <div class="include" data-include="componentX" data-method="replace"></div>
JS
function includeComponents($) { $('.include').each(function () { var file = 'view/html/component/' + $(this).data('include') + '.html'; var dataComp = fs.readFileSync(file); var htmlComp = dataComp.toString(); if ($(this).data('method') == "replace") { $(this).replaceWith(htmlComp); } else if ($(this).data('method') == "append") { $(this).append(htmlComp); } }) } function foo(){ fs.readFile('./view/html/index.html', function (err, data) { if (err) throw err; var html = data.toString(); var $ = cheerio.load(html); includeComponents($); ... } }
追加 – >将内容包含到div中
replace – >replacediv
您可以轻松地添加更多的行为遵循相同的devise
html5rocks.com有一个非常好的教程，这可能会有点晚，但我自己并不知道这个存在。 w3schools也有办法使用他们的新库w3.js来做到这一点。 问题是，这需要使用Web服务器和HTTPRequest对象。 你实际上不能在本地加载它们并在你的机器上testing它们。 你可以做什么，是使用顶部的html5rocks链接提供的polyfills，或者按照他们的教程。 用一点JS魔法，你可以做这样的事情：
var link = document.createElement('link'); if('import' in link){ //Run import code link.setAttribute('rel','import'); link.setAttribute('href',importPath); document.getElementsByTagName('head')[0].appendChild(link); //Create a phantom element to append the import document text to link = document.querySelector('link[rel="import"]'); var docText = document.createElement('div'); docText.innerHTML = link.import; element.appendChild(docText.cloneNode(true)); } else { //Imports aren't supported, so call polyfill importPolyfill(importPath); }
这将使链接（如果已经设置，可以改变为想要的链接元素），设置导入（除非你已经有了），然后附加它。 然后从那里取出并parsingHTML中的文件，然后将其附加到div下的所需元素。 这一切都可以改变，以满足您从附加元素到您正在使用的链接的需求。 我希望这能帮上忙，如果没有使用jQuery或W3.js这样的库和框架，更新，更快的方法已经出来，那么现在可能就无关紧要了。
更新：这将引发一个错误，说明本地导入已被CORS策略阻塞。 由于深度networking的特性，可能需要访问深度networking才能使用它。 （没有实际意义）
在w3.js包括这样的作品：
<body> <div w3-include-HTML="h1.html"></div> <div w3-include-HTML="content.html"></div> <script>w3.includeHTML();</script> </body>
您可以使用HTML导入的填充（ https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ），或简化的解决schemehttps://github.com/dsheiko/html-import
例如，在您导入HTML块的页面上：
<link rel="html-import" href="./some-path/block.html" >
该块可能有自己的import：
<link rel="html-import" href="./some-other-path/other-block.html" >
import商用加载的HTMLreplace指令几乎就像SSI
这些指令将会在加载这个小的JavaScript时自动提供：
<script async src="./src/html-import.js"></script>
当DOM准备好时，它将处理导入。 此外，它公开了一个API，可以用来手动运行，获取日志等。 请享用 ：）
我来到这个话题寻找类似的东西，但与洛洛构成的问题有点不同。 我想构build一个HTML页面，其中包含链接到其他页面的按字母顺序排列的菜单，每个其他页面可能也可能不存在，创build它们的顺序可能不是按字母顺序（甚至不是数字）。 此外，就像Tafkadasoh，我不想用jQuery膨胀网页。 经过几个小时的研究和实验后，下面是我的工作，并添加了相关的评论：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1"> <meta name="Author" content="me"> <meta copyright="Copyright" content= "(C) 2013-present by me" /> <title>Menu</title> <script type="text/javascript"> <!-- var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009, F010, F011, F012, F013, F014, F015, F016, F017, F018, F019; var dat = new Array(); var form, script, write, str, tmp, dtno, indx, unde; /* The "F000" and similar variables need to exist/be-declared. Each one will be associated with a different menu item, so decide on how many items maximum you are likely to need, when constructing that listing of them. Here, there are 20. */ function initialize() { window.name="Menu"; form = document.getElementById('MENU'); for(indx=0; indx<20; indx++) { str = "00" + indx; tmp = str.length - 3; str = str.substr(tmp); script = document.createElement('script'); script.type = 'text/javascript'; script.src = str + ".js"; form.appendChild(script); } /* The for() loop constructs some <script> objects and associates each one with a different simple file name, starting with "000.js" and, here, going up to "019.js". It won't matter which of those files exist or not. However, for each menu item you want to display on this page, you will need to ensure that its .js file does exist. The short function below (inside HTML comment-block) is, generically, what the content of each one of the .js files looks like: <!-- function F000() { return ["Menu Item Name", "./URLofFile.htm", "Description string"]; } --> (Continuing the remarks in the main menu.htm file) It happens that each call of the form.appendChild() function will cause the specified .js script-file to be loaded at that time. However, it takes a bit of time for the JavaScript in the file to be fully integrated into the web page, so one thing that I tried, but it didn't work, was to write an "onload" event handler. The handler was apparently being called before the just-loaded JavaScript had actually become accessible. Note that the name of the function in the .js file is the same as one of the the pre-defined variables like "F000". When I tried to access that function without declaring the variable, attempting to use an "onload" event handler, the JavaScript debugger claimed that the item was "not available". This is not something that can be tested-for! However, "undefined" IS something that CAN be tested-for. Simply declaring them to exist automatically makes all of them "undefined". When the system finishes integrating a just-loaded .js script file, the appropriate variable, like "F000", will become something other than "undefined". Thus it doesn't matter which .js files exist or not, because we can simply test all the "F000"-type variables, and ignore the ones that are "undefined". More on that later. The line below specifies a delay of 2 seconds, before any attempt is made to access the scripts that were loaded. That DOES give the system enough time to fully integrate them into the web page. (If you have a really long list of menu items, or expect the page to be loaded by an old/slow computer, a longer delay may be needed.) */ window.setTimeout("BuildMenu();", 2000); return; } //So here is the function that gets called after the 2-second delay function BuildMenu() { dtno = 0; //index-counter for the "dat" array for(indx=0; indx<20; indx++) { str = "00" + indx; tmp = str.length - 3; str = "F" + str.substr(tmp); tmp = eval(str); if(tmp != unde) // "unde" is deliberately undefined, for this test dat[dtno++] = eval(str + "()"); } /* The loop above simply tests each one of the "F000"-type variables, to see if it is "undefined" or not. Any actually-defined variable holds a short function (from the ".js" script-file as previously indicated). We call the function to get some data for one menu item, and put that data into an array named "dat". Below, the array is sorted alphabetically (the default), and the "dtno" variable lets us know exactly how many menu items we will be working with. The loop that follows creates some "<span>" tags, and the the "innerHTML" property of each one is set to become an "anchor" or "<a>" tag, for a link to some other web page. A description and a "<br />" tag gets included for each link. Finally, each new <span> object is appended to the menu-page's "form" object, and thereby ends up being inserted into the middle of the overall text on the page. (For finer control of where you want to put text in a page, consider placing something like this in the web page at an appropriate place, as preparation: <div id="InsertHere"></div> You could then use document.getElementById("InsertHere") to get it into a variable, for appending of <span> elements, the way a variable named "form" was used in this example menu page. Note: You don't have to specify the link in the same way I did (the type of link specified here only works if JavaScript is enabled). You are free to use the more-standard "<a>" tag with the "href" property defined, if you wish. But whichever way you go, you need to make sure that any pages being linked actually exist! */ dat.sort(); for(indx=0; indx<dtno; indx++) { write = document.createElement('span'); write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] + "', 'Menu');\" style=\"color:#0000ff;" + "text-decoration:underline;cursor:pointer;\">" + dat[indx][0] + "</a> " + dat[indx][2] + "<br />"; form.appendChild(write); } return; } // --> </script> </head> <body onload="initialize();" style="background-color:#a0a0a0; color:#000000; font-family:sans-serif; font-size:11pt;"> <h2> MENU <noscript><br /><span style="color:#ff0000;"> Links here only work if<br /> your browser's JavaScript<br /> support is enabled.</span><br /></noscript></h2> These are the menu items you currently have available:<br /> <br /> <form id="MENU" action="" onsubmit="return false;"> <!-- Yes, the <form> object starts out completely empty --> </form> Click any link, and enjoy it as much as you like.<br /> Then use your browser's BACK button to return to this Menu,<br /> so you can click a different link for a different thing.<br /> <br /> <br /> <small>This file (web page) Copyright (c) 2013-present by me</small> </body> </html>
如果你使用像django / bootle这样的框架，他们通常会运送一些模板引擎。 假设你使用瓶子，默认的模板引擎是SimpleTemplate Engine 。 下面是纯html文件
$ cat footer.tpl <hr> <footer> <p>© stackoverflow, inc 2015</p> </footer>
你可以在你的main文件中包含footer.tpl，比如：
$ cat dashboard.tpl %include footer
除此之外，你也可以传递参数给你的dashborard.tpl。
一个简单的解决scheme与PHP：
<?php readfile("yourpath/yourpage.html"); ?>
PHP是一种服务器级的脚本语言。 它可以做很多事情，但是一个常用的用法是在页面中包含HTML文档，与SSI非常相似。 像SSI一样，这是一个服务器级别的技术。 如果您不确定您的网站上是否具有PHPfunction，请联系您的托pipe服务提供商。
以下是一个简单的PHP脚本，您可以使用它在任何启用PHP的网页上包含一段HTML代码：
保存您的网站的常见元素的HTML来分隔文件。 例如，您的导航部分可能会保存为navigation.html或navigation.php。 使用以下PHP代码在每个页面中包含该HTML。
<?php require($DOCUMENT_ROOT . "navigation.php"); ?>
在每个要包含文件的页面上使用相同的代码。 确保将较亮的文件名称更改为包含文件的名称和path。
那么，如果你想要做的就是把文本从一个单独的文件放到你的页面（文本中的标签也应该工作），你可以这样做（你的文本样式在主页上 – test.html仍然应该工作）：
test.html
<html> <body> <p>Start</p> <p>Beginning</p> <div> <script language="JavaScript" src="sample.js"></script> </div> <p>End</p> </body> </html>
sample.js
var data="Here is the imported text!"; document.write(data);
毕竟，你总是可以重新创build你自己想要的HTML标签。 服务器端脚本只是需要从另一个文件中获取文本，除非你想做更多的事情。
无论如何，我开始使用这个是因为如果我更新大量的HTML文件之间的通用描述，我只需要更新一个文件来做（ .js文件），而不是每一个HTML文件包含文本。
因此，总而言之，不是导入.html文件，而是一个简单的解决scheme，就是将一个.js文件的.html文件的内容导入到一个variables中（并将内容写入您调用脚本的屏幕）。
谢谢你的问题。
使用jquery你需要导入库
我build议你使用PHP
<?php echo"<html> <body>"; ?> <?php include "b.html"; ?> <?php echo" </body> </html>"; ?>
b.html
<div>hi this is ur file :3<div>
