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

lolo 590 html include

我有2个HTML文件,假设a.htmlb.html.在a.html我想包括b.html.

在JSF中,我可以这样做:

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

这意味着内部a.xhtml文件,我可以包括b.xhtml.

我们怎么能在*.html文件中做到这一点?

lolo.. 650

在我看来,最好的解决方案使用jQuery:

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html:

<p>This is my include file</p>

这个方法是解决我的问题的简单而干净的解决方案.

jQuery .load()文档就在这里.

  • **这确实需要服务器**.在本地文件上使用它时:`XMLHttpRequest无法加载file:///.../b.html.交叉源请求仅支持协议方案:http,数据,chrome,chrome-extension,https,chrome-extension-resource (31认同)
  • @RodrigoRuiz` $(function(){})`只会在文档加载完成后执行. (9认同)
  • 如果包含的HTML文件附加了CSS,则可能会破坏您的页面样式. (7认同)
  • 我完全像你提到的那样.我正在使用bootstrap并对B.html进行css覆盖.当我在A.html中使用B.html以便它最终成为A.html的标题时,我可以看到css已经失去了优先级并且具有不同的布局.对此有何解决方案? (5认同)
  • 做这个`<script> $("#includedContent").load("b.html"); </ script>有什么区别? (4认同)
  • @Basj你现在可以通过使用Firefox来解决这个问题.我认为还有一个chrome附加组件可以解决这个问题.更多信息:http://stackoverflow.com/questions/20041656/xmlhttprequest-cannot-load-file-cross-origin-requests-are-only-supported-for-ht (2认同)

mhanisch.. 141

从上面扩展lolo的答案,如果你需要包含很多文件,这里有一点自动化:

<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = 'views/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

然后在html中包含一些内容:

<div data-include="header"></div>
<div data-include="footer"></div>

其中包括文件views/header.html和views/footer.html

  • 很棒的答案队友,应该更高! (11认同)
  • 小建议 - 你不需要`类="包括"` - 只是让你的jQuery选择`变种包括= $("[数据包括]");` (5认同)
  • 在Google Chrome上对我不起作用 (2认同)
  • @ArtemBernatskyi当你运行本地服务器时它有用吗?这是一个简单的教程:https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server#Running_a_simple_local_HTTP_server (2认同)

Tafkadasoh.. 136

我的解决方案类似于上面的lolo.但是,我通过JavaScript的document.write而不是使用jQuery插入HTML代码:

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>

b.js:

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

或者只是使用下面在Github上作为Gist发布的方便的bash脚本,自动完成所有必要的工作,转换b.htmlb.js:https: //gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Greg Minshall对改进的sed命令的信用也逃脱了反斜杠和单引号,这是我原来的sed命令没有考虑的.

  • @Baratong除了你的html充满了转义字符这一事实! (47认同)
  • @TrevorHickey是的,你是对的,这是我解决方案的缺点,而且不是很优雅.但是,因为您可以在每行的末尾插入带有简单正则表达式的'\',这对我来说最适合.嗯...也许我应该在我的回答中添加如何通过正则表达式进行插入... (3认同)

小智.. 84

通过Html5rocks教程聚合物项目导出 HTML5导入

例如:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

  • HTML导入并不意味着直接在页面中包含内容.这个答案中的代码只使`stuff.html`可用*作为父页面中的模板*,但是您必须使用脚本在父页面中创建其DOM的克隆*,以便它们可见用户. (26认同)
  • 2018年末更新:HTML导入显然由于某种原因而被弃用(https://www.chromestatus.com/features/5144752345317376) (6认同)
  • Firefox不支持它.要启用它,请尝试设置"dom.webcomponents.enabled".它仅适用于具有可更新Web视图的Chrome和Opera,Android(startng 4.4.3).Apple浏览器不支持它.对于Web组件来说这看起来不错,但还没有广泛实现. (3认同)

Michael Marr.. 57

我编写的库的无耻插件解决了这个问题.

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

以上将取内容/path/to/include.html并替换div它.

  • 如果include.html嵌入了它,它会评估JavaScript吗? (4认同)
  • 辉煌!!!!你的似乎是唯一一个替换div标签的解决方案,div标签用作插入位置的标记.我稍后会仔细研究这个来源!! :-) (2认同)

Webdesign7 L.. 42

一个简单的服务器端include指令包含在同一文件夹中找到的另一个文件,如下所示:

<!--#include virtual="a.html" --> 

  • 您需要配置服务器以使用SSI (19认同)
  • 以下是为服务器配置SSI的参考:http://httpd.apache.org/docs/2.4/howto/ssi.html#configuring (7认同)

Aleksandar V.. 33

一个非常古老的解决方案我当时满足了我的需求,但这里是如何做到符合标准的代码:

<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->

<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->

  • 似乎`<object>`,`<embed>`和`<iframe>`都适用于此,但在所有三种情况下,他们使用自己的样式和脚本上下文创建单独的文档(iframe特别包括丑陋的边框和滚动条) ,例如默认情况下,任何链接都在其中打开而不是在父页面上打开(尽管可以使用target ="_ parent"覆盖它).从所有这些方面来看,iframe是唯一一个希望通过HTML5"seamless"属性(由bjb568提到)更加集成的人,但它还没有得到很好的支持:http://caniuse.com/#feat=iframe -无缝 (8认同)
  • iframe-seamless已从HTML标准中删除:https://github.com/whatwg/html/issues/331。因此,@ waldyrious评论不再正确(介意更新您的评论吗?) (2认同)

bjb568.. 33

不需要脚本.不需要在服务器端做任何花哨的东西(这可能是更好的选择)

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

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

iframe[seamless] {
    border: none;
}

请记住,对于不支持无缝的浏览器,如果单击iframe中的链接,它将使框架转到该URL,而不是整个窗口.解决这个问题的方法是拥有所有链接target="_parent",浏览器支持"足够好".

  • Iframe有许多缺点.我不想使用iframe. (14认同)
  • `seamless`属性**已从[HTML]草案中删除(https://github.com/whatwg/html/issues/331)**.不要使用它. (9认同)
  • 例如,它似乎不是从父页面应用css样式. (5认同)
  • @Randy So?这可以算作加号(特别是对于用户生成的内容等).无论如何,您可以轻松地再次包含css文件而无需另外请求. (3认同)

小智.. 16

作为替代方案,如果您可以访问服务器上的.htaccess文件,则可以添加一个简单的指令,允许在以.html扩展名结尾的文件上解析php.

RemoveHandler .html
AddType application/x-httpd-php .php .html

现在您可以使用简单的PHP脚本来包含其他文件,例如:

<?php include('b.html'); ?>

  • 是的,这是一个非常糟糕的建议.Html文件是静态的,并且非常快速地由apache提供.如果将所有html文件添加到php解析器只是为了包含文件,那么服务器上会出现很多性能问题.javascript方式(jQuery或普通JS)不是很好的解决方案,但它们仍然比这个更高效,更危险. (26认同)

小智.. 13

如果需要包含来自某个文件的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


小智.. 9

这对我有所帮助.从添加的HTML代码块b.htmla.html,这应该进入head的标签a.html:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

然后在body标签中,使用唯一的id和javascript块b.html将容器加载到容器中,如下所示:

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>

  • 这个答案与这个问题的接受答案有何不同? (5认同)

小智.. 8

在w3.js中包含这样的作品:

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>


Ben Mc.. 8

我知道这是一个非常古老的帖子,所以当时没有一些方法可用.但这是我非常简单的看法(根据Lolo的回答).

它依赖于HTML5 data-*属性,因此非常通用,因为它使用jQuery的for-each函数来使每个.class匹配"load-html"并使用其各自的'data-source'属性来加载内容:

<div class="container-fluid">
    <div class="load-html" id="NavigationMenu" data-source="header.html"></div>
    <div class="load-html" id="MainBody" data-source="body.html"></div>
    <div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
    $(".load-html").each(function () {
        $(this).load(this.dataset.source);
    });
});
</script>


Dmitry Sheik.. 7

您可以使用HTML Imports(https://www.html5rocks.com/en/tutorials/webcomponents/imports/)的polyfill ,或者简化的解决方案 https://github.com/dsheiko/html-import

例如,在页面上导入HTML块,如下所示:

<link rel="html-import" href="./some-path/block.html" >

该块可能有自己的导入:

<link rel="html-import" href="./some-other-path/other-block.html" >

导入器将指令替换为加载的HTML,与SSI非常相似

加载这个小JavaScript后,这些指令将自动提供:

<script async src="./src/html-import.js"></script>

当DOM准备就绪时,它将处理导入.此外,它还公开了一个可用于手动运行,获取日志等的API.请享用 :)


小智.. 5

要插入指定文件的内容:

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


Amir Saniyan.. 5

大多数解决方案都有效,但它们与jquery存在问题:

问题是以下代码$(document).ready(function () { alert($("#includedContent").text()); }警报,而不是警告包含的内容.

我写下面的代码,在我的解决方案中,您可以访问$(document).ready功能中包含的内容:

(关键是同步加载包含的内容).

index.htm:

<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上的插件


归档时间:

查看次数:

1353446 次

最近记录:

8 月,4 周 前