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

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

在JSF中，我可以这样做:

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

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

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

当前回答

下面是我使用Fetch API和async函数的方法

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

2019-01-08 13:17:55

其他回答

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

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

你也可以试试谷歌聚合物

2015-06-17 17:56:08

好吧，如果你只是想把一个单独文件中的文本放到你的页面中(文本中的标签也应该可以工作)，你可以这样做(你在主页上的文本样式- 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文件的内容放在一个变量中(并将内容写入调用脚本的屏幕)。

谢谢你的问题。

2015-08-28 01:33:34

通过Html5rocks教程检查HTML5导入在聚合物项目

例如:

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

2014-03-03 08:41:56

以下工作，如果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

2014-05-20 07:11:27

这些解决方案都不适合我的需要。我在寻找更像php的东西。在我看来，这个解决方案非常简单有效。

include.js - - - >

void function(script) {
    const { searchParams } = new URL(script.src);
    fetch(searchParams.get('src')).then(r => r.text()).then(content => {
        script.outerHTML = content;
    });
}(document.currentScript);

index . html - - - >

<script src="/include.js?src=/header.html">
<main>
    Hello World!
</main>
<script src="/include.js?src=/footer.html">

可以做一些简单的调整来创建include_once、require和require_once，它们可能都很有用，这取决于您正在做什么。下面是一个简短的例子。

include_once - - - >

var includedCache = includedCache || new Set();
void function(script) {
    const { searchParams } = new URL(script.src);
    const filePath = searchParams.get('src');
    if (!includedCache.has(filePath)) {
        fetch(filePath).then(r => r.text()).then(content => {
            includedCache.add(filePath);
            script.outerHTML = content;
        });
    }
}(document.currentScript);

希望能有所帮助!

2022-10-14 06:17:37

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

推荐文章

最新文章

标签