Fatal编程技术网
  • javascript/
  • Javascript 在HTML文件中包含另一个HTML文件

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

javascript html dom

Javascript 在HTML文件中包含另一个HTML文件,javascript,html,dom,include,Javascript,Html,Dom,Include,我有两个HTML文件，假设a.HTML和b.HTML。在a.html中，我想包括b.html 在JSF中，我可以这样做： <ui:include src="b.xhtml" /> <link rel="html-import" href="./some-path/block.html" > 这意味着在a.xhtml文件中，我可以包含b.xhtml 如何在*.html文件中执行此操作？作为替代方法，如果您可以访问服务器上的.htaccess文件，您可以添加一个简单的

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

在JSF中，我可以这样做：

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

<link rel="html-import" href="./some-path/block.html" >
这意味着在
a.xhtml
文件中，我可以包含
b.xhtml

如何在
*.html
文件中执行此操作？

作为替代方法，如果您可以访问服务器上的.htaccess文件，您可以添加一个简单的指令，允许对扩展名为.html的文件解释php

RemoveHandler .html
AddType application/x-httpd-php .php .html
现在，您可以使用简单的php脚本包含其他文件，例如：

<?php include('b.html'); ?>
在我看来，最好的解决方案是使用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>

<p>This is my include file</p>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
这个方法简单明了地解决了我的问题

jQuery
.load（）
文档是。

我的解决方案与上面的解决方案类似。但是，我通过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>

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>\
\
');

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>

`);

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>
或者只需使用以下在Github上作为要点发布的便捷bash脚本，它可以自动完成所有必要的工作，将
b.html
转换为
b.js
：

对改进的SED命令的信任，它还可以逃出斜杠和单引号，这是我原来的SED命令没有考虑的。 或者，对于支持以下功能的浏览器也可以：

b.js:

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

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>\
\
');

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>

`);

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

document.write(`
在此处添加您的HTML代码
注意，您不必用“\”来转义LF，
如上面的代码清单所示。


`);
包含在同一文件夹中找到的另一个文件的简单服务器端include指令如下所示：

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

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

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
您也可以尝试：

<!--#include file="a.html" -->
A我当时确实满足了我的需求，但下面是如何做到符合标准的代码：

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


备份内容
要插入命名文件的内容：

<!--#include virtual="filename.htm"-->
不需要脚本。不需要在服务器端做任何花哨的事情（尽管这可能是一个更好的选择）

请记住，对于不支持无缝的浏览器，如果单击iframe中的链接，它将使框架转到该url，而不是整个窗口。一种解决方法是让所有链接都有
target=“\u parent”
，尽管浏览器支持“足够好”

Athari的答案（第一个！）太有说服力了！非常好

但是，如果您希望将要包含的页面名称作为URL参数传递，那么这篇文章有一个非常好的解决方案，可以与以下内容结合使用：

所以它变成了这样：

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

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

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
您的网址：

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>


函数GetURLParameter（sParam）
{
var sPageURL=window.location.search.substring（1）；
var sURLVariables=sPageURL.split（'&'）；
对于（变量i=0；i
这对我很有效！
我希望有帮助：）

我写的解决这个问题的库的无耻插件
以上内容将采用
/path/to/include.html
的内容，并用它替换
div
。

签出HTML5导入 在

例如：

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

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>\
\
');

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>

`);

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>
如果需要包括来自某个文件的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...

…之前的文本。。。
警告：无法包含文件\-to \-include.html。
…之后的文本。。。
参考资料：

大多数解决方案都有效，但它们在jquery方面存在问题：

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

<div id="test">
    There is no issue between this solution and jquery.
</div>
问题在于以下代码
$（document）.ready（函数（）{alert（$（“#includedContent”）.text（）；}
不向任何内容发出警报，而向包含的内容发出警报

我编写了以下代码，在我的解决方案中，您可以访问
$（文档）中包含的内容。就绪
功能：

（关键是同步加载包含的内容）

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>

<div id="test">
    There is no issue between this solution and jquery.
</div>


（函数（$）{
$.include=函数（url）{
$.ajax({
url:url，
async:false，
成功：功能（结果）{
记录（结果）；
}
});
};
}（jQuery））；
$（文档）.ready（函数（）{
警报（$（“#测试”）.text（）；
});
美元包括（“包括公司”）；
include.inc：

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

<div id="test">
    There is no issue between this solution and jquery.
</div>


这个解决方案和jquery之间没有问题。

目前还没有针对该任务的直接HTML解决方案。即使是（永久在草稿中）也不会这样做，因为导入！=Include和一些JS魔术仍然是必需的。
我最近写的这篇文章只是为了将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>
它是
开源的
，可能会给出一个想法（我希望）

，您可以实现公共库，只需使用下面的代码就可以在一行中导入任何HTML文件

<head>
   <link rel="import" href="warnings.html">
</head>
您也可以尝试从上面扩展lolo的答案，如果您必须包含大量文件，这里有一点更自动化。使用以下JS代码：

$（函数（）{
变量包含=$（“[数据包含]”）
$。每个（包括，函数（）{
var file='views/'+$（thi