我有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文件的内容放在一个变量中(并将内容写入调用脚本的屏幕)。

谢谢你的问题。