Javascript 在 HTML 文件中包含另一个 HTML 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8988855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Include another HTML file in a HTML file
提问by lolo
I have 2 HTML files, suppose a.htmland b.html. In a.htmlI want to include b.html.
我有 2 个 HTML 文件，假设a.html和b.html. 在a.html我想包括b.html.
In JSF I can do it like that:
在 JSF 中，我可以这样做：
<ui:include src="b.xhtml" />
It means that inside a.xhtmlfile, I can include b.xhtml.
这意味着在a.xhtml文件内部，我可以包含b.xhtml.
How can we do it in *.htmlfile?
我们如何在*.html文件中做到这一点？
回答by lolo
In my opinion the best solution uses jQuery:
在我看来，最好的解决方案是使用 jQuery：
a.html:
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:
b.html：
<p>This is my include file</p>
This method is a simple and clean solution to my problem.
这种方法是我的问题的简单而干净的解决方案。
The jQuery .load()documentation is here.
jQuery.load()文档在这里。
回答by mhanisch
Expanding lolo's answer from above, here is a little more automation if you have to include a lot of files:
从上面扩展 lolo 的答案，如果您必须包含大量文件，这里有更多的自动化：
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = 'views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>
And then to include something in the html:
然后在 html 中包含一些内容：
<div data-include="header"></div>
<div data-include="footer"></div>
Which would include the file views/header.html and views/footer.html
其中将包括文件 views/header.html 和 views/footer.html
回答by Tafkadasoh
My solution is similar to the one of loloabove. However, I insert the HTML code via JavaScript's document.write instead of using jQuery:
我的解决方案类似于上面的lolo之一。但是，我通过 JavaScript 的 document.write 而不是使用 jQuery 插入 HTML 代码：
a.html:
一个.html：
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>
b.js:
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>\
\
');
The reason for me against using jQuery is that jQuery.js is ~90kb in size, and I want to keep the amount of data to load as small as possible.
我反对使用 jQuery 的原因是 jQuery.js 的大小约为 90kb，我希望加载的数据量尽可能小。
In order to get the properly escaped JavaScript file without much work, you can use the following sed command:
为了在没有太多工作的情况下获得正确转义的 JavaScript 文件，您可以使用以下 sed 命令：
sed 's/\/\\/g;s/^.*$/&\/g;s/'\''/\'\''/g' b.html > escapedB.html
Or just use the following handy bash script published as a Gist on Github, that automates all necessary work, converting b.htmlto b.js:
https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
或者只使用以下在 Github 上作为 Gist 发布的方便的 bash 脚本，自动执行所有必要的工作，转换b.html为b.js：https:
//gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
Credits to Greg Minshallfor the improved sed command that also escapes back slashes and single quotes, which my original sed command did not consider.
感谢Greg Minshall改进了 sed 命令，该命令也转义了反斜杠和单引号，我原来的 sed 命令没有考虑到这些。
Alternatively for browsers that support template literalsthe following also works:
或者，对于支持模板文字的浏览器，以下也适用：
b.js:
b.js：
document.write(`
<h1>Add your HTML code here</h1>
<p>Notice, you do not have to escape LF's with a '\',
like demonstrated in the above code listing.
</p>
`);
回答by user1587439
Checkout HTML5 imports via Html5rocks tutorial and at polymer-project
通过 Html5rocks 教程和聚合物项目检查 HTML5 导入
For example:
例如：
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
回答by Michael Marr
Shameless plug of a library that I wrote the solve this.
我写的一个库的无耻插件解决了这个问题。
https://github.com/LexmarkWeb/csi.js
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
The above will take the contents of /path/to/include.htmland replace the divwith it.
上面的内容将/path/to/include.html取而代之div。
回答by Webdesign7 London
A simple server side include directive to include another file found in the same folder looks like this:
一个简单的服务器端包含指令来包含在同一文件夹中找到的另一个文件，如下所示：
<!--#include virtual="a.html" -->
回答by bjb568
No need for scripts. No need to do any fancy stuff server-side (tho that would probably be a better option)
不需要脚本。无需在服务器端做任何花哨的事情（这可能是更好的选择）
<iframe src="/path/to/file.html" seamless></iframe>
Since old browsers don't support seamless, you should add some css to fix it:
由于旧浏览器不支持无缝，你应该添加一些 css 来修复它：
iframe[seamless] {
border: none;
}
Keep in mind that for browsers that don't support seamless, if you click a link in the iframe it will make the framego to that url, not the whole window. A way to get around that is to have all links have target="_parent", tho the browser support is "good enough".
请记住，对于不支持无缝的浏览器，如果您单击 iframe 中的链接，它将使框架转到该 url，而不是整个窗口。解决这个问题的一种方法是让所有链接都有target="_parent"，但浏览器支持“足够好”。
回答by Aleksandar Vaci?
A very old solutionI did met my needs back then, but here's how to do it standards-compliant code:
我当时确实满足了我的需求，这是一个非常古老的解决方案，但这里是如何做到符合标准的代码：
<!--[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]-->
回答by rtd1123
As an alternative, if you have access to the .htaccess file on your server, you can add a simple directive that will allow php to be interpreted on files ending in .html extension.
作为替代方案，如果您可以访问服务器上的 .htaccess 文件，您可以添加一个简单的指令，允许在以 .html 扩展名结尾的文件上解释 php。
RemoveHandler .html
AddType application/x-httpd-php .php .html
Now you can use a simple php script to include other files such as:
现在您可以使用一个简单的 php 脚本来包含其他文件，例如：
<?php include('b.html'); ?>
回答by CoolDude
Following works if html content from some file needs to be included: For instance, the following line will include the contents of piece_to_include.html at the location where the OBJECT definition occurs.
如果需要包含来自某个文件的 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...
Reference: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
参考：http: //www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
