提问人：lolo 提问时间：1/24/2012 最后编辑：Kamil Kiełczewskilolo 更新时间：8/28/2023 访问量：2082023
在 HTML 文件中包含另一个 HTML 文件
Include another HTML file in a HTML file
问：
我有 2 个 HTML 文件，假设和 .在我想包括 .a.htmlb.htmla.htmlb.html
在 JSF 中，我可以这样做：
<ui:include src="b.xhtml" />
这意味着在文件中，我可以包括 .a.xhtmlb.xhtml
我们怎样才能在文件中做到这一点？*.html
答：
17赞
rtd1123
1/24/2012
#1
或者，如果您有权访问服务器上的 .htaccess 文件，您可以添加一个简单的指令，允许在以 .html 扩展名结尾的文件上解释 php。
RemoveHandler .html
AddType application/x-httpd-php .php .html
现在，您可以使用简单的 php 脚本来包含其他文件，例如：
<?php include('b.html'); ?>
评论
30赞
Gfra54
5/23/2014
是的，这是一个非常糟糕的建议。Html 文件是静态的，由 apache 提供的速度非常快。如果您将所有 html 文件添加到 php 解析器只是为了包含文件，那么您的服务器将面临很多性能问题。javascript 方式（jQuery 或纯 JS）不是很好的解决方案，但它们仍然比这个更有效，危险性更小。
0赞
user3459110
5/23/2014
@Gfra54 您的意思是，如果我们仅为此使用Apache，并且我们不为该站点做任何php工作，我们将遇到性能问题吗？或者如果我一起使用 php 和这个东西，它会变慢吗？
1赞
cssyphus
12/30/2015
警告：将这些行添加到 .htaccess 可能会导致 html 页面尝试下载为文件，而不是在浏览器中查看。首先测试。 免责声明：当我尝试上述解决方案时，这刚刚发生在我身上。除了上面两行外，我的 .htaccess 是空的。建议谨慎。试试lolo的jQuery解决方案（如下）。
0赞
Gman
6/16/2016
伙计，即使我以前做过，我也在使自己复杂化。感谢您的提醒。出于我需要的目的，它不会真正影响性能，所以我很酷。
0赞
moodboom
1/7/2017
呵呵，这个性能崩溃的答案是开箱即用思维的一个很好的例子。我永远不会建议它，但当你需要快速一点 php 大锤时，也许是一个救命稻草。:-)
817赞
lolo
1/25/2012
#2
在我看来，最好的解决方案是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>
这种方法是解决我问题的简单而干净的解决方案。
jQuery文档在这里。.load()
评论
8赞
Rodrigo Ruiz
4/11/2015
只做这个有什么区别 '<script>$（“#includedContent”）.load（“b.html”）;</脚本> ？
20赞
ProfK
5/11/2015
@RodrigoRuiz只会在文档完成加载后执行。$(function(){})
10赞
Omar Jaafor
10/7/2015
如果包含的 HTML 文件附加了 CSS，它可能会弄乱您的页面样式。
6赞
Pavan Dittakavi
10/9/2015
我和你提到的一模一样。我正在使用引导程序并覆盖 B.html 的 css。当我在 A.html 中使用 B.html 以使其最终成为 A.html 的标题时，我可以看到 css 已经失去了优先级并且具有不同的布局。有什么解决方案吗？
87赞
Basj
12/4/2016
这确实需要服务器。在本地文件上使用它时：XMLHttpRequest cannot load file:///.../b.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
196赞
Tafkadasoh
3/6/2013
#3
我的解决方案类似于上面的 lolo。但是，我通过 JavaScript 的 document.write 而不是使用 jQuery 插入 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：
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，并且我希望将要加载的数据量保持在尽可能小的位置。
为了获得正确转义的 JavaScript 文件，您可以使用以下 sed 命令：
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html
或者只是使用以下方便的 bash 脚本作为 Gist，在 Github 上发布，它可以自动执行所有必要的工作，转换为： https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6b.htmlb.js
感谢 Greg Minshall 改进的 sed 命令，该命令也转义了反斜杠和单引号，而我原来的 sed 命令没有考虑这些。
或者，对于支持模板文字的浏览器，以下操作也有效：
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>
`);
评论
4赞
Tafkadasoh
4/23/2014
@TrevorHickey 是的，你是对的，这是我的解决方案的缺点，而且不是很优雅。但是，由于您可以在每行末尾插入带有简单正则表达式的“\”，因此这对我来说最有效。嗯。。。也许我应该在我的答案中添加如何通过正则表达式进行插入......
2赞
EML
9/2/2014
使用普通的 JS 而不是 jQuery 来做 Ajax 是微不足道的。对于初学者，请参阅 stackoverflow.com/questions/8567114/...。
3赞
jbyrd
12/9/2016
哦，嘘，这太丑了——不，谢谢。我宁愿把我的html写成html。我不在乎我是否可以在命令行上使用 sed - 我不想每次更改模板内容时都必须依赖它。
1赞
wizzwizz4
11/3/2017
@Goodra 它应该适用于任何没有标记的 HTML。如果你只是做一个 查找/替换 替换 \' 然后 find / replace 替换 和 换行符 ''换行符 它会正常工作。'` with '\'
1赞
Tafkadasoh
1/15/2018
@wizzwizz4：多亏了 Greg，sed 命令现在也转义了单引号和反斜杠。此外，我还添加了一个 bash 脚本，可以为您完成所有工作。:-)
50赞
Webdesign7 London
4/14/2013
#4
一个简单的服务器端 include 指令，用于包含在同一文件夹中找到的另一个文件，如下所示：
<!--#include virtual="a.html" -->
您也可以尝试：
<!--#include file="a.html" -->
评论
26赞
lolo
6/24/2013
您需要配置服务器以使用 SSI
7赞
shasi kanth
1/19/2015
以下是为服务器配置 SSI 的参考：httpd.apache.org/docs/2.4/howto/ssi.html#configuring
1赞
james
9/3/2015
可能也值得一试<!--#include file="a.html" -->
0赞
Amit Verma
10/18/2015
SSI 包含使 Web-Server 速度稍慢（因此应避免使用，除非绝对必要）。
0赞
bendecko
4/28/2021
对于IIS，这也是一个不错的解决方案。我必须将' <add name=“SSINC-html” path=“.html” verb=“” modules=“ServerSideIncludeModule” resourceType=“File” />' 添加到我的文件中web.config<handlers>
37赞
Aleksandar Vacić
4/20/2013
#5
我当时做的一个非常古老的解决方案满足了我的需求，但以下是如何做到符合标准的代码：
<!--[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]-->
评论
12赞
waldyrious
10/26/2014
看起来 ，并且都为此工作，但在所有三种情况下，它们都创建具有自己的样式和脚本上下文的单独文档（iframe 特别包括丑陋的边框和滚动条），例如，默认情况下在其中打开的任何链接，而不是在父页面上打开（尽管这可以用 target=“_parent”覆盖）。在所有这些中，iframe 是唯一一个有希望通过 HTML5 属性（bjb568 提到）变得更加集成的，但它还没有得到很好的支持： caniuse.com/#feat=iframe-seamless<object><embed><iframe>seamless
3赞
Tomáš Pospíšek
8/27/2018
iframe-seamless 已从 HTML 标准中删除：github.com/whatwg/html/issues/331。所以@waldyrious评论不再正确（介意更新你的评论吗？
3赞
waldyrious
9/17/2018
谢谢你的提醒，@TomášPospíšek。我无法再编辑我的评论，但希望您的回复能为读者提供必要的警告。需要明确的是，最后一句话（关于属性）是唯一过时的部分——其余的仍然适用。seamless
0赞
George Birbilis
10/14/2022
要不显示滚动条，应将其样式设置为内联块，请参阅 anycodings.com/1questions/2247104/...
6赞
St.Eve
8/18/2013
#6
要插入命名文件的内容，请执行以下操作：
<!--#include virtual="filename.htm"-->
评论
1赞
St.Eve
8/18/2013
对 [ ]：[ --#include virtual=“include_omega.htm”-- 使用尖括号 ]
0赞
Paulo Ney
8/26/2020
这需要一个服务器！它不适用于本地文件。
71赞
bjb568
#7
无需脚本。无需在服务器端做任何花哨的事情（这可能是一个更好的选择）
<iframe src="/path/to/file.html" seamless></iframe>
由于旧浏览器不支持无缝，您应该添加一些 css 来修复它：
iframe[seamless] {
border: none;
}
请记住，对于不支持无缝的浏览器，如果您单击 iframe 中的链接，它将使框架转到该 URL，而不是整个窗口。解决此问题的一种方法是让所有链接都具有，浏览器支持“足够好”。target="_parent"
评论
10赞
Randy
10/25/2014
例如，它似乎没有应用父页面中的CSS样式。
6赞
bjb568
10/25/2014
@Randy呢？这可以算作一个加分项（特别是对于用户生成的内容等）。无论如何，您都可以轻松地再次包含 css 文件，而无需因为缓存而发出另一个请求。
0赞
Grimxn
11/11/2015
回答了我对这个问题答案的需求 - 如何在另一个 html 文件中包含一个 html 文件......
1赞
pglpm
6/25/2020
太棒了，我可以包含一个完整的 html 文档，其中包含交互式 3D 绘图。谢谢！
4赞
Massa
12/20/2013
#8
阿塔里人的回答（第一个！）太有说服力了！非常好！
但是，如果您想将要包含的页面名称作为 URL 参数传递，这篇文章有一个非常好的解决方案可以与以下组合使用：
http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html
所以它变成了这样：
您的网址：
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>
它对我来说效果很好！ 我希望对:)有所帮助
评论
0赞
Mr. Hugo
10/16/2019
安全问题，因为你可以给别人发这个链接：www.yoursite.com/a.html？p=htttp：//www.linktovir.us/here.html
85赞
Michael Marr
1/14/2014
#9
我写的一个图书馆的无耻插件解决了这个问题。
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
上面将获取 的内容并用它替换。/path/to/include.htmldiv
评论
4赞
Seth
2/19/2014
如果嵌入了 include.html，这会评估 JavaScript 吗？
1赞
xandout
10/16/2014
@Seth似乎不是。我将尝试使用src，看看我是否可以让它做到这一点。感谢 michael-marr
2赞
kpollock
7/30/2016
明！！！！您的解决方案似乎是唯一可以替换用作插入位置令牌的 div 标签的解决方案。我稍后会仔细研究来源！！:-)
1赞
Vincent Tang
4/5/2018
感谢它的工作，它包括 HTML/CSS，但不包括源文件中的 Javascript。您只需要在使用 .这个工具可以更轻松地以干净的方式制作一个简单的无插件多页模型。<div data-include="/path/to/include.html"></div>
1赞
yeppe
12/20/2018
我可以在任何应用程序中使用这个库吗？我的意思是怎么能相信作者？W3School 也有类似的解决方案，唯一的区别是您的代码也迎合了窗口加载的递归调用......w3schools.com/howto/tryit.asp?filename=tryhow_html_include_1
98赞
user1587439
3/3/2014
#10
通过 Html5rocks 教程和 polymer-project 查看 HTML5 导入
例如：
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
评论
36赞
waldyrious
10/26/2014
HTML 导入并不意味着直接将内容包含在页面中。此答案中的代码仅作为父页面中的模板提供，但您必须使用脚本在父页面中创建其 DOM 的克隆，以便用户可以看到它们。stuff.html
1赞
Brōtsyorfuzthrāx
8/27/2015
html5rocks.com 中关于将一个 HTML 页面的内容插入另一个 HTML 页面的说明似乎在很多浏览器中都不起作用。我在 Opera 12.16 和 Superbird 版本 32.0.1700.7 （233448） 中尝试过，但没有效果（在 Xubuntu 15.04 上）。不过，我听说它在 Firefox 中不起作用（由于一个希望已修复的错误）或许多版本的 Chrome。因此，虽然它看起来可能是未来的理想解决方案，但它不是一个跨浏览器的解决方案。
3赞
Maxim
1/4/2017
Firefox 将不支持它。要启用它，请尝试设置“dom.webcomponents.enabled”。它仅适用于 Chrome 和 Opera、具有可更新 Web 视图的 Android（startng 4.4.3）。Apple 浏览器不支持它。对于Web组件来说，这似乎是一个好主意，但尚未广泛实现。
20赞
V. Rubinetti
11/8/2018
2018 年末更新：由于某种原因，HTML 导入显然已被弃用
4赞
Paulo Ney
8/26/2020
HTML 导入已弃用，并于 2020 年 2 月从 Chrome 中移除。
27赞
CoolDude
5/20/2014
#11
如果需要包含某些文件中的 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
评论
4赞
vbocan
8/10/2016
就像一个魅力，它是最干净的解决方案。这应该是公认的答案。
0赞
Sridhar Sarnobat
11/14/2016
同意。请注意：不要尝试做一个自闭合对象标签。之后的文本将被删除。
0赞
IAM_AL_X
11/28/2018
它似乎创建了一个新的“#document”，它自动包含新的嵌套<html>和<body>标签。这对我的目的不起作用;我的.html文件包含<script src=“...”type=“text/javascript”>标签;但是 JS 有新的引用错误。
0赞
George Birbilis
10/14/2022
应该将其样式设置为内联块，请参阅 anycodings.com/1questions/2247104/...
8赞
Amir Saniyan
6/13/2014
#12
大多数解决方案都有效，但它们存在jquery问题：
问题在于代码之后什么都不会发出警报，而不是对包含的内容发出警报。$(document).ready(function () { alert($("#includedContent").text()); }
我编写了以下代码，在我的解决方案中，您可以访问函数中包含的内容：$(document).ready
（关键是同步加载包含的内容）。
索引：.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>
评论
0赞
hmcclungiii
10/7/2014
使用此功能，然后从浏览器查看页面源代码时，您只能看到脚本。这不会影响搜索引擎解析您网站的能力，最终破坏任何 SEO 工作吗？
0赞
Amir Saniyan
10/18/2014
是的，这种方法破坏了任何 SEO :)
0赞
wizzwizz4
11/3/2017
话又说回来，每个基于 JavaScript 的方法都是这样做的。
3赞
al.scvorets
4/29/2015
#13
目前没有针对该任务的直接 HTML 解决方案。即使是 HTML Imports（永久处于草稿状态）也无法做到这一点，因为无论如何都需要 Import ！= Include 和一些 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
2赞
Dhiral Pandya
6/18/2015
#14
这是一篇很棒的文章，您可以实现通用库，只需使用下面的代码即可在一行中导入任何 HTML 文件。
<head>
<link rel="import" href="warnings.html">
</head>
您也可以尝试 Google Polymer
评论
8赞
skybondsor
4/15/2017
“只需使用下面的代码在一行中导入任何 HTML 文件”是非常不诚实的。然后，您必须编写一些JS来使用您导入的任何内容，因此它最终不仅仅是“一行”。
0赞
Paulo Ney
8/26/2020
HTML 导入已弃用，并于 2020 年 2 月从 Chrome 中移除。
0赞
johny why
11/28/2022
@PauloNey这不是，而是。importlink
223赞
mwiegboldt
8/5/2015
#15
扩展 lolo 的答案，如果您必须包含大量文件，这里会有更多的自动化。使用以下 JS 代码：
$(function () {
var includes = $('[data-include]')
$.each(includes, function () {
var file = 'views/' + $(this).data('include') + '.html'
$(this).load(file)
})
})
然后在 html 中包含一些内容：
<div data-include="header"></div>
<div data-include="footer"></div>
这将包括文件和 .views/header.htmlviews/footer.html
评论
1赞
chris
4/8/2016
非常有用。有没有办法通过另一个数据参数传递参数，例如在包含的文件中检索它？data-argument
1赞
Nam G VU
5/6/2016
@chris 您可以使用 GET 参数，例如$("#postdiv").load('posts.php?name=Test&age=25');
2赞
Artem Bernatskyi
9/10/2017
无法在带有本地文件的 chrome 上运行“跨域请求仅支持协议方案：htt”
2赞
mwiegboldt
9/11/2017
@ArtemBernatskyi 当您运行本地服务器时，它是否有帮助？这里有一个简单的教程：developer.mozilla.org/en-US/docs/Learn/Common_questions/...
3赞
AndrewL64
9/20/2015
#16
你可以用 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.htmlbanner.html
另外，请注意，如果您使用 JavaScript 加载内容，Google 将无法将其编入索引，因此出于 SEO 原因，这并不是一个好方法。
5赞
SubLock69
2/17/2017
#17
html5rocks.com 有一个关于这个东西的非常好的教程，这可能有点晚了，但我自己并不知道它的存在。W3Schools也有一种方法可以使用他们的新库W3.js来做到这一点。问题是，这需要使用 Web 服务器和 HTTPRequest 对象。您实际上无法在本地加载这些内容并在计算机上测试它们。不过，您可以做的是使用顶部 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);
}
这将使链接（如果已设置，可以更改为所需的链接元素），设置导入（除非您已经有它），然后附加它。然后，它将从那里获取并解析 HTML 中的文件，然后将其附加到 div 下的所需元素。这一切都可以更改以满足您的需求，从附加元素到您正在使用的链接。我希望这有所帮助，如果出现更新，更快的方法而不使用jQuery或W3.js等库和框架，现在可能无关紧要。
更新：这将引发一个错误，指出本地导入已被 CORS 策略阻止。由于深网的属性，可能需要访问深网才能使用它。（表示没有实际用途）
14赞
Ramtin
2/20/2017
#18
这就是帮助我的原因。要添加 html 代码块 from to ，这应该进入 ：b.htmla.htmlheada.html
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
然后在 body 标签中，使用唯一 id 和 javascript 块创建一个容器，用于将 load 到容器中，如下所示：b.html
<div id="b-placeholder">
</div>
<script>
$(function(){
$("#b-placeholder").load("b.html");
});
</script>
评论
6赞
Mohammad Usman
1/16/2018
这个答案与这个问题的公认答案有何不同？
3赞
Ramtin
1/16/2018
@MohammadUsman 这里，容器和 javascript 代码位于 body 标签中，而接受的答案将它们放在 head 标签中，而容器仅保留在 body 标签中。
0赞
Kennet Celeste
11/29/2019
这不值得一个新的答案......这是一条评论
18赞
Kaj Risberg
4/12/2017
#19
在 w3.js 中包括这样的作品：
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
有关正确的描述，请查看以下内容： https://www.w3schools.com/howto/howto_html_include.asp
评论
0赞
Kaj Risberg
10/2/2018
如果你想知道文档是什么时候加载的，你可以把它放在文档的末尾： <img src=“thisimagedoesnotexist.dmy” onerror='initDocument（）' style='display：none;'>聪明的伎俩，嗯？
9赞
Dmitry Sheiko
8/3/2017
#20
您可以使用 HTML Imports （https://www.html5rocks.com/en/tutorials/webcomponents/imports/） 的 polyfill 或简化的解决方案 https://github.com/dsheiko/html-import
例如，在您导入 HTML 块的页面上，如下所示：
<link rel="html-import" href="./some-path/block.html" >
该块可能有自己的导入：
<link rel="html-import" href="./some-other-path/other-block.html" >
导入器将指令替换为加载的 HTML，就像 SSI 一样
这些指令将在加载此小 JavaScript 后立即自动提供：
<script async src="./src/html-import.js"></script>
当 DOM 准备就绪时，它将自动处理导入。此外，它还公开了一个 API，您可以使用该 API 手动运行、获取日志等。享受:)
评论
0赞
Andrew Truckle
10/28/2018
脚本行应该在html文件中放在哪里？
0赞
Dmitry Sheiko
10/29/2018
BODY内的任何位置。可以递归地放置在所包含文件的内容中
0赞
BurninLeo
3/16/2021
很酷的HTML功能...不幸的是，Chrome 现在报告：HTML 导入已弃用，现已从 M80 开始删除。有关详细信息，请参阅 chromestatus.com/features/5144752345317376 和 developers.google.com/web/updates/2019/07/...。
11赞
Ben Mc
3/27/2018
#21
我知道这是一个非常古老的帖子，所以当时没有一些方法。 但这是我对它非常简单的看法（基于 Lolo 的回答）。
它依赖于 HTML5 data-* 属性，因此非常通用，因为它使用 jQuery 的 for-each 函数来获取每个匹配的 .class “load-html”，并使用其各自的“data-source”属性来加载内容：
<div class="container-fluid">
<div class="load-html" id="NavigationMenu" data-source="header.html"></div>
<div class="load-html" id="MainBody" data-source="body.html"></div>
<div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$(".load-html").each(function () {
$(this).load(this.dataset.source);
});
});
</script>
7赞
barro32
1/8/2019
#22
这是我使用 Fetch API 和异步函数的方法
<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>
<script>
const components = document.querySelectorAll('.js-component')
const loadComponent = async c => {
const { name, ext } = c.dataset
const response = await fetch(`${name}.${ext}`)
const html = await response.text()
c.innerHTML = html
}
[...components].forEach(loadComponent)
</script>
评论
0赞
Bikram Kumar
4/12/2022
请通过添加注释来解释您的代码。
7赞
pinei
3/25/2019
#23
将 Fetch API 与 Promise 结合使用的另一种方法
<html>
<body>
<div class="root" data-content="partial.html">
<script>
const root = document.querySelector('.root')
const link = root.dataset.content;
fetch(link)
.then(function (response) {
return response.text();
})
.then(function (html) {
root.innerHTML = html;
});
</script>
</body>
</html>
2赞
Hamza Ali
8/6/2019
#24
要使解决方案正常工作，您需要包含文件 csi.min.js，您可以在此处找到该文件。
根据 GitHub 上显示的示例，要使用此库，您必须在页面标题中包含文件 csi.js，然后您需要在容器元素上添加 data-include 属性，并将其值设置为要包含的文件。
隐藏复制代码
<html>
<head>
<script src="csi.js"></script>
</head>
<body>
<div data-include="Test.html"></div>
</body>
</html>
...希望它有所帮助。
评论
0赞
Joshua Robison
7/16/2022
仅当您在服务器上运行它时，这才有效。我想在没有服务器的情况下在本地进行开发。
6赞
Alban Lusitanae
10/12/2019
#25
您是否尝试过 iFrame 注入？
它将 iFrame 注入文档并删除自身（它应该在 HTML DOM 中）
<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
问候
评论
0赞
Joshua Robison
7/16/2022
这在我想在没有服务器的情况下进行本地开发 file:// 不起作用。这仅适用于服务器，然后只需使用 SSI。你能在没有服务器的情况下让它工作吗？
30赞
Mustafa Burak Kalkan
12/9/2019
#26
这是我的内联解决方案：
(() => {
const includes = document.getElementsByTagName('include');
[].forEach.call(includes, i => {
let filePath = i.getAttribute('src');
fetch(filePath).then(file => {
file.text().then(content => {
i.insertAdjacentHTML('afterend', content);
i.remove();
});
});
});
})();<p>FOO</p>
<include src="a.html">Loading...</include>
<p>BAR</p>
<include src="b.html">Loading...</include>
<p>TEE</p>评论
0赞
Muhammad Saquib Shaikh
11/16/2020
它可以工作，但脚本不适用于此包含的文档。
0赞
Mustafa Burak Kalkan
11/16/2020
你指的是片段@MuhammadSaquibShaikh？它肯定行不通，因为 jsfiddle 没有多文件基础结构
0赞
Muhammad Saquib Shaikh
11/16/2020
我正在加载另一个html文件（具有js文件的脚本标签），但是js代码显示null以选择DOM元素
0赞
Mqx
3/31/2023
简单易行的脚本。完美地简单地包含 HTML 文件。干得好！@MuhammadSaquibShaikh 不过，它并不是真正用于运行脚本标签的。
6赞
Kamil Kiełczewski
6/16/2020
#27
Web 组件
我创建了类似于 JSF 的以下 Web 组件
<ui-include src="b.xhtml"><ui-include>
您可以将其用作页面中的常规 html 标签（在包含片段 js 代码之后）
customElements.define('ui-include', class extends HTMLElement {
async connectedCallback() {
let src = this.getAttribute('src');
this.innerHTML = await (await fetch(src)).text();;
}
})ui-include { margin: 20px } /* example CSS */<ui-include src="https://cors-anywhere.herokuapp.com/https://example.com/index.html"></ui-include>
<div>My page data... - in this snippet styles overlaps...</div>
<ui-include src="https://cors-anywhere.herokuapp.com/https://www.w3.org/index.html"></ui-include>（StackOverflow 片段会更好地工作（加载整个页面，而不仅仅是消息）当你第一次去这里并按下按钮让你的计算机临时访问 CORS-Anywhere 时）
评论
0赞
B''H Bi'ezras -- Boruch Hashem
8/15/2020
我们如何在没有 JavaScript 的情况下做到这一点
1赞
nachoab
9/11/2020
在该元素上使用可能也是有意义的，以使<ui-include>布局消失。我认为这是预期的行为。display: contents
6赞
xmoonlight
1/13/2021
#28
使用 includeHTML（最小 js-lib：~150 行）
通过 HTML 标记加载 HTML 部分（纯 js）
支持的加载：异步/同步，任何深度递归包括
支持的协议：http://、https://、file:///
支持的浏览器：IE 9+、FF、Chrome（也可能是其他）
用法：
1.在HTML文件中将includeHTML插入到head部分（或正文关闭标记之前）：
<script src="js/includeHTML.js"></script>
2.随处使用includeHTML作为HTML标签：
<div data-src="header.html"></div>
评论
0赞
xmoonlight
10/12/2021
@Williams，非常感谢您对我工作的反馈！
0赞
Shaw
9/3/2023
当支持相当于告诉您关闭 Chrome 网络安全（CORS 检查）时，您不能真正声称它支持该协议。file://alert()
2赞
Dealazer
8/15/2021
#29
这里有几种类型的答案，但我从未在这里找到最古老的工具：
“所有其他答案都对我不起作用。”
<html>
<head>
<title>pagetitle</title>
</head>
<frameset rows="*" framespacing="0" border="0" frameborder="no" frameborder="0">
<frame name="includeName" src="yourfileinclude.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">
</frameset>
</html>
评论
0赞
Rublacava
7/6/2022
w3schools.com/TAgs/tag_frame.asp - HTML5 :(不支持 HTML <frame> 标记
0赞
rbaleksandar
9/25/2022
如果我没记错的话，现在框架经常被阻止，因为过去它们被广告商利用，主要用于传播恶意内容。
5赞
Calculamatrise
10/14/2022
#30
这些解决方案都不适合我的需求。我一直在寻找更像PHP的东西。在我看来，这个解决方案非常简单和高效。
include.js ->
void function(script) {
const { searchParams } = new URL(script.src);
fetch(searchParams.get('src')).then(r => r.text()).then(content => {
script.outerHTML = content;
});
}(document.currentScript);
index.html ->
<script src="/include.js?src=/header.html">
<main>
Hello World!
</main>
<script src="/include.js?src=/footer.html">
可以进行简单的调整以创建 、 和 ，根据您正在执行的操作，这些调整可能都很有用。下面是一个简短的示例。include_oncerequirerequire_once
include_once ->
var includedCache = includedCache || new Set();
void function(script) {
const { searchParams } = new URL(script.src);
const filePath = searchParams.get('src');
if (!includedCache.has(filePath)) {
fetch(filePath).then(r => r.text()).then(content => {
includedCache.add(filePath);
script.outerHTML = content;
});
}
}(document.currentScript);
希望对你有所帮助！
评论
0赞
arkan
11/21/2023
我喜欢你不需要用这个解析整个 DOM。
评论
localhost<script> $(function(){ $("#includedNavigation").load("navigation.html"); }); </script>