我有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文件中做到这一点?
当前回答
这是一篇很棒的文章,你可以实现公共库,只需使用下面的代码在一行中导入任何HTML文件。
<head>
<link rel="import" href="warnings.html">
</head>
你也可以试试谷歌聚合物
其他回答
不要脸的插头一个库,我写了解这个。
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
上面的代码将获取/path/to/include.html的内容,并用它替换div。
要让解决方案工作,您需要包括文件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>
... 希望能有所帮助。
我强烈建议AngularJS的ng-include,不管你的项目是不是AngularJS。
<script src=".../angular.min.js"></script>
<body ng-app="ngApp" ng-controller="ngCtrl">
<div ng-include="'another.html'"></div>
<script>
var app = angular.module('ngApp', []);
app.controller('ngCtrl', function() {});
</script>
</body>
你可以从AngularJS中找到CDN(或下载Zip),更多信息可以从W3Schools中获取。
以下工作,如果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
好吧,如果你只是想把一个单独文件中的文本放到你的页面中(文本中的标签也应该可以工作),你可以这样做(你在主页上的文本样式- 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);
毕竟,您总是可以自己重新创建您想要的HTML标记。服务器端脚本只需要从另一个文件获取文本,除非您想做更多的事情。
无论如何,我开始使用这个是为了使它,所以如果我更新一个描述在许多HTML文件中,我只需要更新一个文件来做它(.js文件),而不是每一个包含文本的HTML文件。
因此,总的来说,与其导入.html文件,更简单的解决方案是导入一个.js文件,并将.html文件的内容放在一个变量中(并将内容写入调用脚本的屏幕)。
谢谢你的问题。