logo标签列表

用jQuery从外部HTML加载body

jqueryhtmlload
22

我正在使用jQuery尝试从外部HTML文件中加载body元素。

如果我尝试加载一些

元素，它是可以正常工作的：

$('body').load('example.html #content');

但是我无法像这样加载整个body元素：

$('body').load('example.html body');

根据文档，它“应该”可以工作。 - Pekka
2
不知道为什么它不起作用，但你可以给body添加一个id，并按照你的工作示例进行处理。 - Steve Claridge
1
这明显不起作用。看起来必须将body包装到另一个div中并选择它。 - Mahn
根据这个评论，这种方法不起作用，因为在应用选择器之前，body元素已被剥离。您需要将整个body内容包装在另一个标签中，然后再进行选择。 - jpaugh
我测试过了，它可以正常工作，所以我添加了一个实际答案。 - jpaugh
5个回答
9
从http://api.jquery.com/load：
jQuery使用浏览器的.innerHTML属性来解析已检索的文档并将其插入到当前文档中。在此过程中，浏览器经常会从文档中筛选元素，如<html>、<title>或<head>元素。因此，通过.load()检索到的元素可能与通过浏览器直接检索到的文档完全不同。
从上面的内容可以看出，你的浏览器只返回了body innerHTML。这显然应该与请求的body相同，但可能会因为找不到body而引起错误？
我建议尝试使用其他浏览器。
3
当您使用没有选择器的load时，它会剥离<html>，<head>和<body>标签，但保留<head>和<body>的所有子元素，包括title，script和style标签。然而，当您使用选择器时，它会在剥离body标签之后应用，因此无法匹配它。
相反，将所有的body内容包装在另一个标签中，并选择该标签：
<html><head><title>Hello!</title</head>
<body>
  <div id="jquery-load-point">
    ... <!-- rest of body content -->
  </div>
</body>
</html>

现在，您可以这样加载它：
$("#destination").load("http://my.url/to/page #jquery-load-point");
3
如果您想加载整个页面主体，$('body').load('example.html'); 应该就足够了。
如果不行，请问您能否解释一下原因？
无论如何，Steve 提供的解决方案是正确的。
2
但是这个会包含除了body标签以外的HTML吗？（例如meta，<html>等）我不知道，我在问。 - jon_darkstar
1
我运行了几个测试，没有得到任何<html>或<head>标签。 - Réjôme
4
Diogo的问题并不是这样...在你的建议中，jQuery会加载完整的页面，但内容将没有HTML、HEAD和BODY标签。从HEAD中加载的CSS和脚本将放在已加载的BODY内容上方。 - 321X
我可以确认使用这种方法时，meta charset标签正在被加载，并且像@321X所说的那样，它们被放置在正文内容之上。 - Mister Smith
2
我猜你需要添加一个iframe。将URL传递给其src属性。然后你的整个html将在这个iframe中加载。这是一个简单明了的解决方案。祝一切顺利 :-)
这是一个很好的解决方案，也许是最好的，除非目标页面不允许在iframes中嵌套。这是我一开始尝试的原始解决方案，因为它根本不需要JavaScript。 - jpaugh
谢谢。如果目标页面不允许嵌套，即如果禁用了CORS，则这里的其他解决方案都不会起作用。 - webcoder
CORS有一些重叠，但我实际上在考虑X-FRAME-OPTIONS标头。使用jQuery魔法可以解决这种情况。 - jpaugh
1

请确保您正在使用jQuery 1.5.1而不是1.5版本。1.5版本的加载功能存在问题。我在jquery .load() doesn't work中回答了类似的问题。

另一件事是尝试在不同的浏览器中运行，以确保它不是浏览器问题。Chrome在本地主机上工作时不允许您使用加载功能，除非进行一些调整。

默认行为会从<head>元素中加载很多无用的内容。毫无疑问，这是为了支持加载外部页面同时保留样式表和脚本行为；然而，它也可能会给页面增加很多视觉噪音。 - jpaugh
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接