Question

HTML不支持客户端包含其他HTML，例如使用#include指令获取C。相反，客户端HTML包含的主要工具似乎是iframe，object，尤其是jQuery的.load。有关示例，请参阅this thread。

不幸的是，这些方法似乎都没有产生与#include完全相同的DOM。特别是，iframe和object将包含的内容包装在各自的标记中。此外，示例线程中提出的jQuery解决方案仍会导致带有额外div的DOM。

例如，考虑线程的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>

b.html：

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

这将创建一个身体部分看起来像这样的DOM：

<body> 
  <div id="includedContent">
    <p> This is my include file </p>
  </div>
</body>

但真正的#include不包含包裹div，因此DOM看起来像：

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

在没有包装标签的情况下，知道如何进行客户端包装吗？

编辑：我不想假设周围标签的知识。例如，在这种情况下，周围标记为body，但并非在所有情况下都是。

Answer 1

我假设你的身体有其他元素或其他包含标签，在这种情况下，你可以使用callback of load在加载完成后解开自己。

 $(function(){
   $("#includedContent").load("b.html", function(){
        $(this).contents().unwrap();
   }); 
});

您可以隔离此回调函数，并将其用于您要执行的任何其他load。

   function unWrapPlaceholder(){
     $(this).contents().unwrap();
   }


    $(function(){
       $("#includedContent").load("b.html", unWrapPlaceholder); 
       $("#headerContent").load("h.html", unWrapPlaceholder); 
       $("#footerContent").load("f.html", unWrapPlaceholder); 
    });

Answer 2

我编写的库的无耻插件解决了类似的问题。

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

以上内容将采用/path/to/include.html的内容，并将div替换为{。}}。

Answer 3

在您的示例中，在使用jQuery加载内容之前，您已经在DOM中定义了包装元素。

<body> 
  <div id="includedContent"></div>
</body>

如果您正在使用jQuery .load()，请指定内容的去向。没有理由不能使用

$("body").load("b.html");

哪个会给你

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

Answer 4

您可能想知道jQuery.load()的工作原理here。

现在，在jQuery中，当您选择一个对象并调用load函数时，您希望该特定对象发生更改。

就像在你的例子中一样

$（ “＃includedContent”）负载（ “b.html”）;

您选择了要转换为id includedContent的div元素。代码就是这样做的。负载是加载而不包括。由于ajax需要主要修改页面的一部分而不是整页。

Answer 5

结合其他答案的想法：

$(function(){
    $("[data-include]").each(function(){
        var that = $(this);
        that.load(that.attr('data-include'), function(){
            that.contents().unwrap();
        }); 
    });
});

现在您可以使用类似于其他语言的语法轻松导入，例如：

<div data-include="includes/topmenu.html"></div>

Answer 6

WHATWG提出了有关标准化HTML的建议和讨论，其中还包括指向许多js库https://github.com/whatwg/html/issues/2791

的链接

真正的客户端HTML包括

6 个答案: