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

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

在JSF中，我可以这样做:

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

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

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

当前回答

插入指定文件的内容。

<!--#include virtual="filename.htm"-->

2013-08-18 05:36:08

其他回答

PHP是一种服务器级脚本语言。它可以做很多事情，但一个流行的用途是在页面中包含HTML文档，这与SSI非常相似。与SSI一样，这是一种服务器级技术。如果你不确定你的网站上是否有PHP功能，请联系你的主机提供商。

下面是一个简单的PHP脚本，你可以使用它在任何支持PHP的网页上包含HTML片段:

将网站常用元素的HTML保存到单独的文件中。例如，导航部分可以保存为navigation.html或navigation.php。使用下面的PHP代码将该HTML包含在每个页面中。

<?php require($DOCUMENT_ROOT . "navigation.php"); ?>

在希望包含该文件的每个页面上使用相同的代码。确保将突出显示的文件名更改为包含文件的名称和路径。

2013-12-26 12:45:09

阿塔里人的回答(第一个!)太有定论了!很好!

但是如果你想要传递页面的名称作为URL参数，这篇文章有一个非常好的解决方案，可以结合使用:

http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

所以它变成了这样:

你的网址:

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>

这对我来说非常有效! 我希望能有所帮助:)

2013-12-19 17:05:09

你试过iFrame注入吗?

它在文档中注入iFrame并删除自己(它应该在HTML DOM中)

问候

2019-10-11 16:07:23

Web组件

我创建了以下类似JSF的web组件

<ui-include src="b.xhtml"><ui-include>

你可以在你的页面中使用它作为常规的html标签(在包括snippet js代码之后)

customElements.define('ui-include', class extends HTMLElement { async connectedCallback() { let src = this.getAttribute('src'); this.innerHTML = await (await fetch(src)).text();; } }) ui-include { margin: 20px } /* example CSS */ <ui-include src="https://cors-anywhere.herokuapp.com/https://example.com/index.html"></ui-include> <div>My page data... - in this snippet styles overlaps...</div> <ui-include src="https://cors-anywhere.herokuapp.com/https://www.w3.org/index.html"></ui-include>

2020-06-15 21:28:22

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

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

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

iframe[seamless] {
    border: none;
}

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

2013-11-27 00:52:02

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

推荐文章

最新文章

标签