Question

好的，这就是我想要做的事情：

包含从外部html文件到另一个html文件的页眉和页脚。

我知道，这里有很多可用的片段。但...

...问题：我无法修改这些外部HTML，它们包含带有元，链接和所有内容的完整<head>。

这里是我找到的代码片段（来自@amir-saniyan - github）：

(function ($) {
  $.include = function (url) {
    $.ajax({
      url: url,
      async: false,
      success: function (result) {
        document.write(result);
      }
    });
  };
}(jQuery));
$.include("_header.html");
$.include("_footer.html");

和

$crop_start = (result.indexOf('<body>') !== -1) ? result.indexOf('<body>') + 7 : 0;
$crop_end = (result.indexOf('</body>') !== -1) ? result.indexOf('</body>') : result.length;
result = result.substring($crop_start, $crop_end);

如何合并两个html代码结构以获得预期结果：

将外部html导入另一个，但没有头（只有 html - <body></body>代码之间的代码

Answer 1

在'_header.html'和'_footer.html'的'body'标签下直接添加'div'以保存所有HTML内容（因为jQuery在解析时会剥离'head'标签和'body'标签一个HTML字符串）：

<body>
    <div id="wrapper">
    ...
    </div>
</body>

然后，替换您手动提取的html内容

$crop_start = (result.indexOf('<body>') !== -1) ? result.indexOf('<body>') + 7 : 0;
$crop_end = (result.indexOf('</body>') !== -1) ? result.indexOf('</body>'):result.length;
result = result.substring($crop_start, $crop_end);

通过

result = $(result).filter("#wrapper").html();

通过更改：

将上述解决方案应用于“包含”功能

document.write(result);

到

result = $(result).filter("#wrapper").html();
$("body").append(result);

注意：请记住，$ .ajax调用中的'async'必须为'false'才能使您的标题和＆amp;页脚加载到正确的位置。

Answer 2

您可能需要更准确地了解您的要求，因为您没有定义＆＃34;标题＆＃34;和＆＃34;页脚＆＃34;。在您提供的jQuery代码段中，该代码段应该是包含诸如＆＃34;＆lt;头＆gt;＆＃34;标签（＆＃34;标题＆＃34;的一个定义）。它也是一个具有破坏性的片段，因为document.write（）函数往往会导致已经加载的HTML页面上的所有内容被替换（包括JavaScript！）。

考虑用这样的东西替换对document.write（）函数的调用（避免对这个错别字进行测试）：

 var txt;   //declare this variable somewhere,
            // not necessarily in the code-snippet function

 txt = document.createElement("p"); //paragraph tag
 txt.innerHTML = result;
 document.body.appendChild(txt);

此代码假设您的HTML页面已经有＆lt;身体＆gt;＆lt; / body＆gt;标签对，它们之间可能没有任何内容。

将html页面代码包含到另一个[html]文件中

2 个答案: