在HTML文件中包含另一个HTML文件

我有2个HTML文件，假设a.html和b.html。在a.html中，我想包括b.html。

在JSF中，我可以这样做:

<ui:include src="b.xhtml" />

这意味着在.xhtml文件中，我可以包含b.xhtml。

我们如何在*.html文件中做到这一点?

当前回答

我的解决方案类似于上面的lolo。但是，我通过JavaScript的文档插入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>

研究:

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脚本作为Github上的Gist发布，它自动完成所有必要的工作，将b.html转换为b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

感谢Greg Minshall改进的sed命令，它还转义了反斜杠和单引号，这是我最初的sed命令没有考虑到的。

另外，对于支持模板字面量的浏览器，以下方法也适用:

研究:

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>

`);

2013-03-06 14:40:12

其他回答

不需要脚本。不需要做任何花哨的东西服务器端(尽管这可能是一个更好的选择)

<iframe src="/path/to/file.html" seamless></iframe>

由于旧的浏览器不支持无缝，你应该添加一些css来修复它:

iframe[seamless] {
    border: none;
}

请记住，对于不支持无缝链接的浏览器，如果您单击iframe中的链接，它将使框架指向该url，而不是整个窗口。一种解决方法是让所有链接都有target="_parent"，尽管浏览器的支持是“足够好”。

2013-11-27 00:52:02

我的解决方案类似于上面的lolo。但是，我通过JavaScript的文档插入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>

研究:

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

感谢Greg Minshall改进的sed命令，它还转义了反斜杠和单引号，这是我最初的sed命令没有考虑到的。

另外，对于支持模板字面量的浏览器，以下方法也适用:

研究:

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>

`);

2013-03-06 14:40:12

在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

2017-04-12 09:32:40

如果你使用一些框架，比如django/bootle，他们通常会提供一些模板引擎。假设您使用了bottle，默认的模板引擎是SimpleTemplate engine。下面是纯html文件

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

你可以包括页脚。TPL在你的主文件中，比如:

$ cat dashboard.tpl
%include footer

除此之外，您还可以将参数传递给dashboard .tpl。

2015-03-18 07:43:52

使用jquery你需要导入库

我建议您使用PHP

<?php
    echo"<html>   
          <body>";
?> 
<?php
    include "b.html";
?>
<?php
    echo" </body> 
        </html>";
?>

b.html

<div>hi this is ur file :3<div>

2014-08-06 19:18:53

在HTML文件中包含另一个HTML文件

推荐文章

最新文章

标签