我有两个HTML文件,假设是a.html
和b.html
。在a.html
中我想包括b.html
。
在JSF中我可以这样做。
<ui:include src="b.xhtml" />
这意味着在a.xhtml
文件内,我可以包括b.xhtml
。
我们如何在*.html
文件中做到这一点?
在我看来,最好的解决方案是使用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()
文档是这里。
拓展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文件。
我的解决方案与上面lolo的解决方案类似。然而,我通过JavaScript'的document.write插入HTML代码,而不是使用jQuery。
a.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:
我反对使用jQuery的原因是jQuery.js的大小为~90kb,而我想尽可能地减少加载的数据量。
为了不费吹灰之力得到正确转义的JavaScript文件,你可以使用以下sed命令。
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html
或者直接使用下面这个在Github上以Gist形式发布的方便的bash脚本,它可以自动完成所有必要的工作,将b.html
转换为b.js
。
https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
归功于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>
`);
查看HTML5导入[通过Html5rocks教程][1] 。 和[聚合物项目][2]
例如:。
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
[1]: http://www.html5rocks.com/en/tutorials/webcomponents/imports/ [2]: http://www.polymer-project.org/platform/html-imports.html
无耻的插播我写的一个库来解决这个问题。
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
上面将取/path/to/include.html
的内容,并将div
替换为它。
当年我做的一个很老的解决方案满足了我的需求,但这里'是如何做到符合标准的代码。
<!--[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]-->
不需要脚本。 不需要在服务器端做任何花哨的东西(尽管这可能是一个更好的选择)。
<iframe src="/path/to/file.html" seamless></iframe>
由于老的浏览器不支持无缝,你应该添加一些css来修复它。
iframe[seamless] {
border: none;
}
请记住,对于不支持无缝链接的浏览器,如果你点击iframe中的链接,它将使_frame_转到该网址,而不是整个窗口。
绕过这个问题的方法是让所有的链接都有target="_parent"
,尽管浏览器支持"足够好"。
如果需要包含某些文件中的html内容,下面的内容就会起作用,例如,下面这行会在OBJECT定义的位置包含piece_to_include.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][1]
[1]: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
这就是帮助我的方法。
如果要在b.html
中添加html代码到a.html
中,应该把它放到a.html
的head
标签中。
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
然后在body标签中,用唯一的id做一个容器,再用javascript块将b.html
加载到容器中,如下图。
<div id="b-placeholder">
</div>
<script>
$(function(){
$("#b-placeholder").load("b.html");
});
</script>
我知道这是一个很老的帖子,所以有些方法当时还没有。 但这是我对它的简单看法(基于 Lolo 的回答)。
它依赖于HTML5的data-*属性,因此是非常通用的,使用jQuery的for-each函数来获取每一个匹配"load-html"的.class。 并使用其各自的'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>
在w3.js中,include是这样的。
<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
你可以使用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,你可以用它来手动运行,获取日志等。 享受:)
大部分的解决方案都能用,但是他们在jquery上出现了问题,问题是下面的代码`$(document.ready(function()) { alert($("#includedContent").text();;。
问题在于以下代码 $(document).ready(function () { alert($("#includedContent").text()); }
什么也不提醒,而是提醒包含的内容。
我写了下面的代码,在我的解决方案中,你可以在$(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 include plugin on github][1] 。
阿塔里´的回答(第一个!)太有定论了! 非常好!
但如果你想把传递的页面名称作为URL参数,这个帖子有一个非常好的解决方案,可以结合使用。
[http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html][1]
[1]: 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>
对我来说非常有效! 我希望有帮助:)
html5rocks.com][1]有一个关于这个东西的非常好的教程,这可能有点晚了,但我自己也不知道有这个东西。 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等库和框架,有更新、更快的方法出现,现在可能已经无关紧要了。
UPDATE:这会抛出一个错误,说本地导入已被CORS策略阻止。 由于深层网络的属性,可能需要访问深层网络才能使用。 (意思是没有实际用途)
[1]: https://www.html5rocks.com/en/tutorials/webcomponents/imports/
目前还没有直接的HTML解决方案来完成这个任务。 即使是HTML Imports(它永远是草案中的)也做不到,因为Import != Include,无论如何都需要一些JS魔法。 我最近写了[一个VanillaJS*脚本](http://al-scvorets.github.io/wm-html-include.js/),就是为了把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>
它是 "开放源码 "的,可以提供一个想法(我希望)。
你可以用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 "应该位于您的其他网页所在的同一域名下,否则您的网页会因[跨源资源共享][1]政策而拒绝 "banner.html "文件。
另外,请注意,如果你用JavaScript加载你的内容,Google将无法索引它,所以出于SEO的原因,这并不是一个好方法。
[1]: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing