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

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

在JSF中，我可以这样做:

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

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

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

当前回答

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

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

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

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

2012-01-24 15:04:53

其他回答

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

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

2020-09-13 12:19:04

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

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

你也可以试试:

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

2013-04-14 14:27:03

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

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

<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

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

大多数解决方案的工作，但他们有jquery的问题:

问题出现在代码$(document)下面。ready(function () {alert($("#includedContent").text());}不提示任何内容，而不是提示包含的内容。

我写下面的代码，在我的解决方案中，你可以访问包含在$(文档)的内容。现成的函数:

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

你可以:

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

2014-06-13 15:23:18

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

推荐文章

最新文章

标签