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

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

在JSF中，我可以这样做:

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

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

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

当前回答

这里有几种类型的答案，但我从来没有发现这里使用的最古老的工具:

“其他的答案对我都不管用。”

<html>
<head>   
    <title>pagetitle</title>
</head>

<frameset rows="*" framespacing="0" border="0" frameborder="no" frameborder="0">
    <frame name="includeName" src="yourfileinclude.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">   
</frameset>

</html>

2021-08-15 14:36:30

其他回答

你可以用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加载内容，谷歌将无法对其进行索引，因此对于SEO而言，这并不是一个好方法。

2015-09-19 23:13:37

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

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中

Replace ->替换div

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

2016-08-03 21:31:33

仅使用HTML是不可能将HTML文件包含在另一个HTML文件中。这里有一个很简单的方法。使用这个JS库你可以很容易地做到这一点。只需使用以下代码:

<script> include('path/to/file.html', document.currentScript) </script>

2020-09-13 12:19:04

插入指定文件的内容。

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

2013-08-18 05:36:08

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

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

推荐文章

最新文章

标签