真正的客户端HTML包括 [英] True client-side HTML includes
问题描述
HTML不支持客户端包含其他HTML，例如通过 #include 指令获取C。
相反，客户端HTML包含的主要工具似乎是 iframe ， object ，特别是jQuery的 .load 。
请参阅此主题中的示例。
不幸的是，这些方法似乎都不会产生与 #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为H.这是我的包含文件< / p>
这将创建一个DOM，其正文部分如下所示：
< body>
< div id =includedContent>
< p>这是我的包含文件< / p>
< / div>
< / body>
但是真正的 #include 不包含包装 div ，所以DOM看起来像：
<体>
< p>这是我的包含文件< / p>
< / body>
任何想法如何在没有包装标签的情况下执行客户端包含？
编辑：我不想假设周围标签的知识。
例如，在这种情况下，周围的标记是 body ，但不会在所有情况下都是这样。
我假设你的身体有其他元素或其他包含标签，在这种情况下，你可以使用
/ load /rel =nofollow>加载回调自动解包。 $（
$（＃includedContent）。load（b.html，function（）{
$（this）.contents（）。unwrap（）;
}）;
}）;
您可以隔离此回调函数，并将其用于任何其他 HTML doesn't support client-side inclusion of other HTML, such as one gets for C with the Unfortunately, none of these methods seem to produce exactly the same DOM one would get from a For example, consider the thread's jQuery solution: a.html: b.html: This will create a DOM where the body part looks like: but a true Any idea how to do a client-side include without the wrapper tags? EDIT: I don't want to assume knowledge of the surrounding tags.
For example, in this case the surrounding tag is I assume that your body has other elements or other inclusion tags like these, in which case you can use the callback of load to unwrap itself once the load is completed. You can isolate this callback function and use it for any other
这篇关于真正的客户端HTML包括的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！加载<
$ p $ 函数unWrapPlaceholder（）{
$（this）code> 。.contents（）解开（）;
$ b $（function（）{
$（＃includedContent）。load（b.html，unWrapPlaceholder）;
$（＃headerContent）。load（h.html，unWrapPlaceholder）;
$（＃footerContent）。load（f.html，unWrapPlaceholder）;
}）;
#include directive.
Instead, the dominant tools for client-side HTML inclusion appear to be iframe, object, and especially jQuery's .load.
See this thread for examples.#include.
In particular, iframe and object wrap the included content in their respective tags.
Also, the jQuery solution proposed in the example thread still results in a DOM with an extra div.<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>
<body>
<div id="includedContent">
<p> This is my include file </p>
</div>
</body>
#include would not include the wrapping div, so the DOM would look like:<body>
<p> This is my include file </p>
</body>
body, but it won't be in all cases. $(function(){
$("#includedContent").load("b.html", function(){
$(this).contents().unwrap();
});
});
load that you'd be performing across. function unWrapPlaceholder(){
$(this).contents().unwrap();
}
$(function(){
$("#includedContent").load("b.html", unWrapPlaceholder);
$("#headerContent").load("h.html", unWrapPlaceholder);
$("#footerContent").load("f.html", unWrapPlaceholder);
});
