我有2个HTML文件,假设a.html和b.html。在a.html中,我想包括b.html。
在JSF中,我可以这样做:
<ui:include src="b.xhtml" />
这意味着在.xhtml文件中,我可以包含b.xhtml。
我们如何在*.html文件中做到这一点?
我有2个HTML文件,假设a.html和b.html。在a.html中,我想包括b.html。
在JSF中,我可以这样做:
<ui:include src="b.xhtml" />
这意味着在.xhtml文件中,我可以包含b.xhtml。
我们如何在*.html文件中做到这一点?
当前回答
扩展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.html和views/footer.html。
其他回答
在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
大多数解决方案的工作,但他们有jquery的问题:
问题出现在代码$(document)下面。ready(function () {alert($("#includedContent").text());}不提示任何内容,而不是提示包含的内容。
我写下面的代码,在我的解决方案中,你可以访问包含在$(文档)的内容。现成的函数:
(关键是同步加载所包含的内容)。
你可以:
<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插件
不要脸的插头一个库,我写了解这个。
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
上面的代码将获取/path/to/include.html的内容,并用它替换div。
扩展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.html和views/footer.html。
另一种方法是使用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>