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


624

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

在JSF中,我可以这样做:

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

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

我们该如何*.html归档?



32
没有!它有2种不同的东西!
lolo 2012年

相关,但针对localhoststackoverflow.com/questions/7542872/…–
cregox

<object type =“ text / html” data =“ b.xhtml”> </ object>
MarMarAba

Answers:


685

我认为最好的解决方案是使用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()文档在这里


5
仅执行此`<script> $(“#includedContent”)。load(“ b.html”); </ script>有什么区别?
罗德里戈·鲁伊斯

10
@RodrigoRuiz $(function(){})仅在文档加载完成后执行。
ProfK 2015年

8
如果随附的HTML文件已附加CSS,则可能会弄乱您的页面样式。
奥马尔·贾福

6
我就像你提到的那样。我正在使用引导程序,并且B.html有CSS覆盖。当我在A.html中使用B.html使其最终成为A.html的标头时,我可以看到css失去了优先级并且具有不同的布局。有什么解决办法吗?
帕万·迪塔卡维

36
这确实需要一台服务器。在本地文件上使用它时:XMLHttpRequest cannot load file:///.../b.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Basj 2016年

154

从上面扩展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


很有用。有没有一种方法可以通过另一个数据参数传递参数,例如data-argument在包含的文件中检索该参数?
克里斯,2016年

@chris您可以使用GET参数,例如$("#postdiv").load('posts.php?name=Test&age=25');
Nam G VU

5
小建议-您不需要class="include"-只需使您的jQuery选择器var includes = $('[data-include]');
jbyrd

不适用于带有本地文件的chrome浏览器“协议方案仅支持跨源请求:htt”
Artem Bernatskyi

2
@ArtemBernatskyi相反,当您运行本地服务器时有帮助吗?这是一个简单的教程:developer.mozilla.org/en-US/docs/Learn/Common_questions/…–
mhanisch

145

我的解决方案类似于上面的lolo之一。但是,我通过JavaScript的document.write插入了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>

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.jshttps : //gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

学分格雷格Minshall为改善sed的命令也逃回斜线和单引号,这我原来的sed命令没有考虑。

另外,对于支持模板文字的浏览器,也可以使用以下功能:

b.js:

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>

`);

4
@TrevorHickey是的,您是对的,这就是我的解决方案的缺点,而且不是很优雅。但是,由于您可以在每行的末尾插入带有简单正则表达式的'\',所以这对我来说效果最好。嗯...也许我应该在我的答案中添加如何通过正则表达式进行插入...
Tafkadasoh 2014年

2
天哪,这很丑-不,谢谢。我宁愿将html编写为html。我不在乎是否可以在命令行上使用sed-我不想每次更改模板内容时都依赖于sed。
jbyrd

1
@Goodra它可以在没有'标记的任何HTML上工作。如果你只是做一个查找/替换替换` with \'那么查找/替换,以取代'\'新线与``新线也将正常工作。
wizzwizz4

1
@ wizzwizz4:感谢Greg,sed命令现在也转义了单引号和反斜杠。此外,我添加了一个bash脚本来为您完成所有工作。:-)
Tafkadasoh

1
您可以使用反引号`-然后可以插入类似表达式${var}-然后只需要转义\`\$
-inetphantom

85

通过Html5rocks教程Polymer-Project检出HTML5导入

例如:

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

27
HTML导入并不意味着实际上直接在页面中包含内容。此答案中的代码仅stuff.html作为模板在父页面中使用,但是您必须使用脚本在父页面中创建其DOM的克隆,以便用户可见。
waldyrious 2014年

1
html5rocks.com上有关将一个HTML页面的内容插入到另一个HTML页面的指令似乎在许多浏览器中都无法正常工作。我在Opera 12.16和Superbird版本32.0.1700.7(233448)中进行了尝试,但没有任何效果(在Xubuntu 15.04上)。我听说它在Firefox(由于可能已修复的错误)或许多版本的Chrome中不起作用。因此,尽管看起来它可能是将来的理想解决方案,但它并不是跨浏览器的解决方案。
Brōtsyorfuzthrāx

1
截至2016年底,FireFox(45.5.1 ESR)显然尚未准备好。JS控制台说:TypeError: ... .import is undefinedMDN表示:“此功能目前尚未在任何浏览器中实现。” 有人知道是否可以使用此功能构建FF吗?
sphakka '16

3
Firefox将不支持它。要启用它,请尝试设置“ dom.webcomponents.enabled”。它只能在具有可更新网页视图(startng 4.4.3)的Chrome和Opera,Android中运行。Apple浏览器不支持它。对于Web组件来说,这似乎是一个不错的主意,但尚未广泛实施。
Maxim

9
2018年末更新:由于某些原因,
V. Rubinetti

60

我写的一个库的无耻插件解决了这个问题。

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

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

上面的内容将采用的内容/path/to/include.html并将其替换div


4
如果include.html嵌入了JavaScript,它将评估JavaScript吗?
赛斯2014年

1
@Seth似乎没有。我将与src一起玩,看看我是否可以做到这一点。感谢michael-marr
xandout

2
辉煌!!!!您的似乎是唯一替代div标记(用作插入位置标记)的解决方案。我待会儿会仔细研究资料!:-)
kpollock '16

1
感谢这项工作,它包括HTML / CSS,但不包括源文件中的Javascript。您只需在使用的任何地方再次包含它<div data-include="/path/to/include.html"></div>。使用此工具可以更轻松地以干净的方式制作简单的无插件多页模型。
Vincent Tang

1
我可以在任何应用程序中使用此库吗?我的意思是怎么可以相信作者?W3School有类似的解决方案,只是区别在于您的代码也
可以满足

43

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

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

21
您需要配置服务器以使用SSI
lolo

7
下面是配置SSI为您的服务器的引用:httpd.apache.org/docs/2.4/howto/ssi.html#configuring
莎丝KANTH

值得一试<!--#include file="a.html" -->,以及
jimmyjudas

SSI包含使Web服务器的运行速度稍慢(因此应避免使用,直到绝对必要)。
阿米特·维尔玛

36

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

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

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

iframe[seamless] {
    border: none;
}

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


7
例如,它似乎没有应用父页面中的CSS样式。
兰迪

5
@兰迪那么?这可以算作一个加号(特别是对于用户生成的内容等)。无论如何,您都可以轻松地再次包含css文件,而无需进行任何其他请求,因为它们仍然需要进行缓存。
bjb568 2014年

回答了我对这个问题的答案的需要-如何在另一个html文件中包含一个html文件...
Grimxn15年

2
这是没有JQuery或脚本的最佳答案。不错,bjb568谢谢!
DBS

12
seamless属性已从来源的HTML草案中删除。不要使用它。
Mitja

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]-->

9
看来<object><embed>并且<iframe>所有功能都可以解决此问题,但是在这三种情况下,它们都使用各自的样式和脚本上下文(iframe特别包含难看的边框和滚动条)创建了单独的文档,例如,默认情况下,其中的任何链接都在其中打开而不是在父页面(尽管可以用target =“ _ parent”覆盖它)。从所有这些方面,iframe是唯一有希望通过HTML5 seamless属性(由bjb568提及)进行集成的唯一工具,但尚未得到很好的支持:caniuse.com/#feat=iframe-seamless
waldyrious

2
iframe-seamless已从HTML标准中删除:github.com/whatwg/html/issues/331。因此,@ waldyrious评论不再正确(打算更新您的评论吗?)
TomášPospíšek18年

1
感谢您的单挑,@TomášPospíšek。我无法再编辑我的评论了,但希望您的回复能为读者提供必要的警告。需要明确的是,最后一句话(关于seamless属性)是唯一过时的部分,其余部分仍然适用。
waldyrious

17

或者,如果您有权访问服务器上的.htaccess文件,则可以添加一个简单的指令,该指令将允许在以.html扩展名结尾的文件中解释php。

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

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

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

28
是的,这是一个非常糟糕的建议。HTML文件是静态的,并且由apache快速提供。如果仅将所有html文件添加到php解析器中,而仅将这些文件添加到php解析器中,则会在服务器上出现很多性能问题。javascript方式(jQuery或纯JS)不是很好的解决方案,但与之相比,它们仍然更高效且危险性更低。
Gfra54

@ Gfra54您的意思是如果仅将Apache用于此目的,我们将遇到性能问题,并且不对该站点进行任何php工作?还是会一起使用php和这个东西放慢速度?
user3459110 2014年

1
警告:添加这些行.htaccess可能会导致html页面尝试以文件形式下载,而不是在浏览器中查看。首先测试。 免责声明:当我尝试上述解决方案时,这只是我现在发生的事情。我.htaccess除了上面两行外都是空的。小心谨慎。尝试使用lolojQuery解决方案(如下)。
cssyphus

男人,即使我以前做过,我也使自己复杂化了。感谢您的提醒。出于这个目的,我并没有真正影响性能,所以我很酷。
Gman

这个糟糕的表现答案是开箱即用思维的一个很好的例子。我从不建议使用它,但是当您需要快速使用php sledgehammer时,可能是一个救命稻草。:-)
moodboom

14

如果需要包含某些文件中的html内容,则可以使用以下内容:例如,以下行将在对象定义发生的位置包括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


2
就像魅力一样,这是最干净的解决方案。这应该是公认的答案。
vbocan

同意。请注意:不要尝试做一个自动关闭的对象标签。后面的文字将被删除。
Sridhar Sarnobat '16

似乎创建了一个新的“ #document”,它自动包含新的嵌套<html>和<body>标记。这对我而言没有用;我的.html文件包含<script src =“ ...” type =“ text / javascript”>标签;但是JS出现了新的参考错误。
IAM_AL_X

12

这是我的就地解决方案:

(() => {
    const includes = document.getElementsByTagName('include');
    [].forEach.call(includes, i => {
        let filePath = i.getAttribute('src');
        fetch(filePath).then(file => {
            file.text().then(content => {
                i.insertAdjacentHTML('afterend', content);
                i.remove();
            });
        });
    });
})();
<p>FOO</p>

<include src="a.html">Loading...</include>

<p>BAR</p>

<include src="b.html">Loading...</include>

<p>TEE</p>


1
woow,它更简单
Arian saputra

非常好的解决方案,非常简单,谢谢^^
Remling

11

在w3.js中,包含以下内容:

<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


如果您想知道何时加载文档,可以将其放在文档的末尾:<img src =“ thisimagedoesnotexist.dmy” onerror ='initDocument()'style ='display:none;'>聪明的把戏,嗯?
Kaj Risberg '18

2
不适用于Google Chrome。
deepcell

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
这个答案与这个问题的公认答案有何不同?
Mohammad Usman '18

1
@MohammadUsman此处,容器和javascript代码位于body标签中,而已接受的答案将其置于head标签中,而仅将容器保留在body标签中。
拉廷

这不值得一个新答案……这是一条评论
Kennet Celeste

8

我知道这是一篇非常老的文章,因此当时还没有一些方法。但是,这是我非常简单的看法(基于Lolo的回答)。

它依赖于HTML5 data- *属性,因此非常通用,因为它使用jQuery的for-each函数来获取每个匹配“ load-html”的.class,并使用其各自的“ 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>

7

您可以使用HTML导入的polyfill(https://www.html5rocks.com/en/tutorials/webcomponents/imports/),也可以使用简化的解决方案 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,您可以使用它手动运行,获取日志等。请享用 :)


脚本行应放在html文件的哪里?
安德鲁·特拉克

身体内的任何地方。可以递归地放置在包含文件的内容中
Dmitry Sheiko '18

你测试了吗?
比丘·苏普提

当然可以。我实际上已经使用了多年。为什么问?任何问题?
德米特里·谢科

因此script async src,看来这是“关键” 。试试吧!
javadba

6

大多数解决方案都可以,但是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 include github上的插件


使用此功能,然后从浏览器查看页面源时,您只会看到脚本。这不会影响搜索引擎解析您的网站的能力,最终破坏SEO的努力吗?
hmcclungiii

是的,这种方法会破坏任何SEO :)
Amir Saniyan 2014年

再说一次,每个基于JavaScript的方法都这样做。
wizzwizz4

5

要插入命名文件的内容:

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

1
对[]:[!-#include virtual =“ include_omega.htm”-]使用尖括号
2013年

4

Athari的答案(第一个!)太定论了!很好!

但是,如果您希望将要包含的页面名称作为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>

对我来说效果很好!希望对您有所帮助:)


安全问题,因为您可以将此链接发送给他人:www.yoursite.com/a.html?
p=htttp

4

html5rocks.com上有一个很好的教程,可能有点晚了,但是我自己并不知道这个存在。w3schools也有一种方法来使用他们的新库w3.js。事实是,这需要使用Web服务器和HTTPRequest对象。您实际上无法在本地加载这些文件并在您的计算机上对其进行测试。不过,您可以使用顶部html5rocks链接中提供的polyfill,或按照其教程进行操作。有了一点JS魔术,您可以执行以下操作:

 var link = document.createElement('link');
 if('import' in link){
     //Run import code
     link.setAttribute('rel','import');
     link.setAttribute('href',importPath);
     document.getElementsByTagName('head')[0].appendChild(link);
     //Create a phantom element to append the import document text to
     link = document.querySelector('link[rel="import"]');
     var docText = document.createElement('div');
     docText.innerHTML = link.import;
     element.appendChild(docText.cloneNode(true));
 } else {
     //Imports aren't supported, so call polyfill
     importPolyfill(importPath);
 }

这将使链接(如果已经设置,可以更改为所需的链接元素),设置导入(除非您已经拥有它),然后附加它。然后它将从那里获取并解析HTML中的文件,然后将其附加到div下的所需元素。从附加元素到所使用的链接,都可以对其进行更改以适应您的需求。我希望这会有所帮助,如果没有使用诸如jQuery或W3.js之类的库和框架的较新的更快的方法,现在可能无关紧要。

更新:这将引发错误,表明本地导入已被CORS策略阻止。由于深层网络的特性,可能需要访问深层网络才能使用它。(表示无实际用途)


4

这是我使用Fetch API和异步函数的方法

<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>

<script>
    const components = document.querySelectorAll('.js-component')

    const loadComponent = async c => {
        const { name, ext } = c.dataset
        const response = await fetch(`${name}.${ext}`)
        const html = await response.text()
        c.innerHTML = html
    }

    [...components].forEach(loadComponent)
</script>

3

暂时没有直接HTML解决方案。即使是 HTML Imports (永久存在于草稿中)也不会执行此操作,因为Import!= Include仍然需要一些JS魔术。
我最近写 了一个VanillaJS脚本,该仅用于将HTML包含到HTML中,而没有任何复杂性。

只是放在你的 a.html

<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>  

open-source并且可能会提出一个想法(我希望)


3

您可以使用JavaScript的库jQuery做到这一点,如下所示:

HTML:

<div class="banner" title="banner.html"></div>

JS:

$(".banner").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

请注意,该页面banner.html应与其他页面位于同一域下,否则banner.html由于跨域资源共享,您的网页将拒绝该文件策略,。

另外,请注意,如果您使用JavaScript加载内容,Google将无法对其进行索引,因此出于SEO的原因,这并不是一种很好的方法。


2

您是否尝试过iFrame注入?

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

<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>

问候


1

我来到此主题的目的是寻找类似的东西,但与lolo提出的问题有所不同。我想构建一个HTML页面,该页面包含按字母顺序排列的指向其他页面的菜单,并且每个其他页面可能存在或可能不存在,并且创建它们的顺序可能不是字母(甚至是数字)。另外,像Tafkadasoh一样,我不想使用jQuery膨胀网页。在研究了问题并进行了几个小时的试验后,这对我有用,并添加了相关说明:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1">
  <meta name="Author" content="me">
  <meta copyright="Copyright" content= "(C) 2013-present by me" />
  <title>Menu</title>

<script type="text/javascript">
<!--
var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009,
    F010, F011, F012, F013, F014, F015, F016, F017, F018, F019;
var dat = new Array();
var form, script, write, str, tmp, dtno, indx, unde;

/*
The "F000" and similar variables need to exist/be-declared.
Each one will be associated with a different menu item,
so decide on how many items maximum you are likely to need,
when constructing that listing of them.  Here, there are 20.
*/


function initialize()
{ window.name="Menu";
  form = document.getElementById('MENU');
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = str.substr(tmp);
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = str + ".js";
    form.appendChild(script);
  }

/*
The for() loop constructs some <script> objects
and associates each one with a different simple file name,
starting with "000.js" and, here, going up to "019.js".
It won't matter which of those files exist or not.
However, for each menu item you want to display on this
page, you will need to ensure that its .js file does exist.

The short function below (inside HTML comment-block) is,
generically, what the content of each one of the .js files looks like:
<!--
function F000()
{ return ["Menu Item Name", "./URLofFile.htm", "Description string"];
}
-->

(Continuing the remarks in the main menu.htm file)
It happens that each call of the form.appendChild() function
will cause the specified .js script-file to be loaded at that time.
However, it takes a bit of time for the JavaScript in the file
to be fully integrated into the web page, so one thing that I tried,
but it didn't work, was to write an "onload" event handler.
The handler was apparently being called before the just-loaded
JavaScript had actually become accessible.

Note that the name of the function in the .js file is the same as one
of the the pre-defined variables like "F000".  When I tried to access
that function without declaring the variable, attempting to use an
"onload" event handler, the JavaScript debugger claimed that the item
was "not available".  This is not something that can be tested-for!
However, "undefined" IS something that CAN be tested-for.  Simply
declaring them to exist automatically makes all of them "undefined".
When the system finishes integrating a just-loaded .js script file,
the appropriate variable, like "F000", will become something other
than "undefined".  Thus it doesn't matter which .js files exist or
not, because we can simply test all the "F000"-type variables, and
ignore the ones that are "undefined".  More on that later.

The line below specifies a delay of 2 seconds, before any attempt
is made to access the scripts that were loaded.  That DOES give the
system enough time to fully integrate them into the web page.
(If you have a really long list of menu items, or expect the page
to be loaded by an old/slow computer, a longer delay may be needed.)
*/

  window.setTimeout("BuildMenu();", 2000);
  return;
}


//So here is the function that gets called after the 2-second delay  
function BuildMenu()
{ dtno = 0;    //index-counter for the "dat" array
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = "F" + str.substr(tmp);
    tmp = eval(str);
    if(tmp != unde) // "unde" is deliberately undefined, for this test
      dat[dtno++] = eval(str + "()");
  }

/*
The loop above simply tests each one of the "F000"-type variables, to
see if it is "undefined" or not.  Any actually-defined variable holds
a short function (from the ".js" script-file as previously indicated).
We call the function to get some data for one menu item, and put that
data into an array named "dat".

Below, the array is sorted alphabetically (the default), and the
"dtno" variable lets us know exactly how many menu items we will
be working with.  The loop that follows creates some "<span>" tags,
and the the "innerHTML" property of each one is set to become an
"anchor" or "<a>" tag, for a link to some other web page.  A description
and a "<br />" tag gets included for each link.  Finally, each new
<span> object is appended to the menu-page's "form" object, and thereby
ends up being inserted into the middle of the overall text on the page.
(For finer control of where you want to put text in a page, consider
placing something like this in the web page at an appropriate place,
as preparation:
<div id="InsertHere"></div>
You could then use document.getElementById("InsertHere") to get it into
a variable, for appending of <span> elements, the way a variable named
"form" was used in this example menu page.

Note: You don't have to specify the link in the same way I did
(the type of link specified here only works if JavaScript is enabled).
You are free to use the more-standard "<a>" tag with the "href"
property defined, if you wish.  But whichever way you go,
you need to make sure that any pages being linked actually exist!
*/

  dat.sort();
  for(indx=0; indx<dtno; indx++)
  { write = document.createElement('span');
    write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] +
                      "', 'Menu');\" style=\"color:#0000ff;" + 
                      "text-decoration:underline;cursor:pointer;\">" +
                      dat[indx][0] + "</a> " + dat[indx][2] + "<br />";
    form.appendChild(write);
  }
  return;
}

// -->
</script>
</head>

<body onload="initialize();" style="background-color:#a0a0a0; color:#000000; 

font-family:sans-serif; font-size:11pt;">
<h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser's JavaScript<br />
support is enabled.</span><br /></noscript></h2>
These are the menu items you currently have available:<br />
<br />
<form id="MENU" action="" onsubmit="return false;">
<!-- Yes, the <form> object starts out completely empty -->
</form>
Click any link, and enjoy it as much as you like.<br />
Then use your browser's BACK button to return to this Menu,<br />
so you can click a different link for a different thing.<br />
<br />
<br />
<small>This file (web page) Copyright (c) 2013-present by me</small>
</body>
</html>

1

这是一篇很棒的文章,您可以实现公共库,只需使用下面的代码一行即可导入任何HTML文件。

<head>
   <link rel="import" href="warnings.html">
</head>

您也可以尝试使用Google Polymer


6
“仅使用下面的代码就可以一行导入任何HTML文件”是很不明显的。然后,您必须编写一些JS来利用您导入的任何内容,因此它最终的作用不只是“一行”。
skybondsor 17-4-15

1

使用ES6反引号 ``:模板文字

let nick = "Castor", name = "Moon", nuts = 1

more.innerHTML = `

<h1>Hello ${nick} ${name}!</h1>

You collected ${nuts} nuts so far!

<hr>

Double it and get ${nuts + nuts} nuts!!

` 
<div id="more"></div>

这样,我们可以包括不带引号的html,包括DOM中的变量等等。

它是一个强大的模板引擎,我们可以使用单独的js文件并使用事件将内容加载到位,甚至可以将所有内容分成块并按需调用:

let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);

https://caniuse.com/#feat=template-literals


1
很好的例子-为什么不投票(到现在)?
javadba

嘿,您是对的,在2018年,这显然是一个不错的RTFM的明显迹象;)javascript直到那时,我还是以业余程序员的身份砸碎了这个徽章。
NVRM

1

要使解决方案正常工作,您需要包含文件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>

... 希望能帮助到你。


0

PHP是服务器级脚本语言。它可以做很多事情,但是一种流行的用法是在页面内包含HTML文档,与SSI几乎相同。像SSI一样,这是服务器级技术。如果不确定网站上是否具有PHP功能,请与托管提供商联系。

这是一个简单的PHP脚本,可用于在任何启用PHP的网页上包含HTML片段:

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

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

在要包含文件的每个页面上使用相同的代码。确保将高亮显示的文件名更改为包含文件的名称和路径。


0

如果您使用诸如django / bootle之类的框架,它们通常会附带一些模板引擎。假设您使用bottle,并且默认模板引擎为SimpleTemplate Engine。下面是纯HTML文件

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

您可以将footer.tpl包含在主文件中,例如:

$ cat dashboard.tpl
%include footer

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


0

基于https://stackoverflow.com/a/31837264/4360308的答案, 我已经使用Nodejs(+ express + cheerio)实现了此功能,如下所示:

HTML(index.html)

<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>

JS

function includeComponents($) {
    $('.include').each(function () {
        var file = 'view/html/component/' + $(this).data('include') + '.html';
        var dataComp = fs.readFileSync(file);
        var htmlComp = dataComp.toString();
        if ($(this).data('method') == "replace") {
            $(this).replaceWith(htmlComp);
        } else if ($(this).data('method') == "append") {
            $(this).append(htmlComp);
        }
    })
}

function foo(){
    fs.readFile('./view/html/index.html', function (err, data) {
        if (err) throw err;
        var html = data.toString();
        var $ = cheerio.load(html);
        includeComponents($);
        ...
    }
}

append->将内容包含到div中

替换->替换div

您可以按照相同的设计轻松添加更多行为

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.