4

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

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

例如，考虑线程的 jQuery 解决方案：

一个.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>

但 true#include不包括 wrapping div，所以 DOM 看起来像：

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

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

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

4

6 回答 6

7

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

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

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

上面将获取的内容/path/to/include.html并div用它替换。

于 2014-01-13T16:49:38.017 回答
6

我假设你的 body 有其他元素或其他包含标签，在这种情况下，一旦加载完成，你可以使用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); 
    });
于 2013-09-20T04:04:17.373 回答
2

WHATWG 有一个关于标准化 HTML 的提案和讨论，其中还包括很多 js 库的链接https://github.com/whatwg/html/issues/2791

于 2018-07-27T07:39:34.463 回答
1

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

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

如果您使用 jQuery 来.load()指定内容的位置。没有理由不能使用

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

哪个会给你

<body> 
  <p> This is my include file </p>
</body>
于 2013-09-20T03:57:42.717 回答
1

您可能想知道此处jQuery.load()记录的工作原理。

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

就像你的例子

$("#includedContent").load("b.html");

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

于 2013-09-20T04:05:27.853 回答
0

结合其他答案的想法：

$(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>
于 2014-06-20T23:05:11.573 回答