【问题标题】:jQuery load body from external HTMLjQuery 从外部 HTML 加载正文
【发布时间】:2011-03-11 09:46:42
【问题描述】:

我正在使用 jQuery 并尝试从外部 HTML 文件加载正文。

如果我尝试加载一些div,它会起作用:

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

但我无法做这样的事情:

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

【问题讨论】:

  • 嗯,根据文档,它应该工作。
  • 不知道为什么它不起作用,但您可以在正文中添加一个 id 并按照您的工作示例处理它。
  • 这绝对行不通。看起来必须将 body 包装到另一个 div 中并选择它。
  • 根据this comment,这不起作用,因为在应用选择器之前会剥离正文元素。您必须将整个内容正文包装在另一个标签中,然后选择它。
  • 我对此进行了测试,它确实有效,所以我添加了一个actual answer

标签: jquery html load


【解决方案1】:

来自http://api.jquery.com/load

jQuery 使用浏览器的 .innerHTML 解析检索到的属性 文档并将其插入 当前文件。在这个过程中, 浏览器通常会从 、

等文档, 或 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 元素。结果, .load() 检索到的元素可能不会 与文档完全相同 被直接取回 浏览器。

阅读以上内容,您的浏览器似乎只返回正文 innerHTML。这显然应该与请求body 相同,但可能因为找不到body 而导致错误?

我建议尝试其他浏览器。

【讨论】:

    【解决方案2】:

    如果你想加载整个身体,$('body').load('example.html'); 应该足够了。

    如果不是,你能解释一下原因吗?

    无论如何,史蒂夫提供的解决方案是正确的。

    【讨论】:

    • 但是它会包含除body标签之外的HTML吗? (即 - 元,&lt;html&gt; 等)我不知道,我在问
    • 我进行了一些测试,但没有得到&lt;html&gt;&lt;head&gt; 标签。
    • 这不是 Diogo 的要求... jQuery 正在加载您建议中的 COMPLETE 页面,但内容将没有 HTML、HEAD 和 BODY 标记。来自 HEAD 的 Css 和脚本将放在加载的正文内容之上。
    • 我可以确认使用此方法时正在加载元字符集标签,并且它们像@321X所说的那样放置在正文内容之上。
    【解决方案3】:

    我猜你需要的是添加一个 iframe。将 URL 传递给它的 src 属性。然后,您的整个 html 将加载到此 iframe 中。为您的问题提供干净简单的解决方案。一切顺利:-)

    【讨论】:

    • 这是一个很好的解决方案,并且可能是最好的除非目标页面不允许嵌套在 iframe 中。这是我尝试的原始解决方案,因为它根本不需要 JavaScript。
    • 谢谢。如果目标页面不允许嵌套。即如果 CORS 被禁用,那么这里的其他解决方案都不起作用。
    • CORS 有一些重叠,但我实际上正在考虑 X-FRAME-OPTIONS 标头。 (Using jQuery magic 可以解决这个问题。
    【解决方案4】:

    当您在没有选择器的情况下使用 load 时,它会去除 &lt;html&gt;&lt;head&gt;&lt;body&gt; 标记,但保留 &lt;head&gt;&lt;body&gt; 的所有子标记,包括标题、脚本和样式标签。但是,当您使用选择器时,它会应用after the body tag is stripped,因此无法与之匹配。

    相反,将所有正文内容包装在另一个标签中,然后选择该标签:

    <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");
    

    【讨论】:

      【解决方案5】:

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

      另一件事是在不同的浏览器中尝试它以确保它不是浏览器问题。 Chrome 不允许您在不进行一些调整的情况下从 localhost 工作时使用负载。

      【讨论】:

      • 默认行为从&lt;head&gt; 元素中加载了大量废话。毫无疑问,这是为了支持加载外部页面,同时保留样式表和脚本行为;但是,它也可能会给页面添加大量视觉噪音。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-10-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-09-21
      • 2011-05-20
      相关资源
      最近更新 更多