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

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

在JSF中，我可以这样做:

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

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

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

当前回答

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

其他回答

你试过iFrame注入吗?

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

问候

2019-10-11 16:07:23

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

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

你也可以试试:

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

2013-04-14 14:27:03

在w3.js中include是这样工作的:

<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

2017-04-12 09:32:40

作为一种替代方法，如果你可以访问服务器上的。htaccess文件，你可以添加一个简单的指令，允许php在以。html扩展名结尾的文件上被解释。

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

现在你可以使用一个简单的php脚本来包含其他文件，比如:

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

2012-01-24 15:04:53

html5rocks.com has a very good tutorial on this stuff, and this might be a little late, but I myself didn't know this existed. w3schools also has a way to do this using their new library called w3.js. The thing is, this requires the use of a web server and and HTTPRequest object. You can't actually load these locally and test them on your machine. What you can do though, is use polyfills provided on the html5rocks link at the top, or follow their tutorial. With a little JS magic, you can do something like this:

 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);
 }

This will make the link (Can change to be the wanted link element if already set), set the import (unless you already have it), and then append it. It will then from there take that and parse the file in HTML, and then append it to the desired element under a div. This can all be changed to fit your needs from the appending element to the link you are using. I hope this helped, it may irrelevant now if newer, faster ways have come out without using libraries and frameworks such as jQuery or W3.js.

UPDATE:这将抛出一个错误，表示本地导入已被CORS策略阻塞。可能需要访问深层网络才能使用它，因为深层网络的特性。(意思是没有实际用途)

2017-02-17 02:48:23

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

推荐文章

最新文章

标签