javascript - 如何将另一个网页的 div 而不是整个页面加载到我的网页中？

Question

我有两个网页 internal.html 和 external.html

我在 internal.html 中有以下代码，它将 external.html 加载到 ID 为“result”的 div 中

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script>
function autoRefresh_div()
{
      $("#result").load("https://abc/external.html");// a function which will load data from other file after x seconds
 }

  setInterval('autoRefresh_div()', 5000); // refresh div after 5 secs
            </script>

我在 external.html 中有一个 ID 为“test”的 div。
如何仅将 external.html 的 id 为“test”的 div 加载到 id 为“result”的 internal.html 的 div 而不是整个页面？

Answer 1

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

加载页面片段

.load() 方法与 $.get() 不同，它允许我们指定要插入的远程文档的一部分。这是通过 url 参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则第一个空格后面的字符串部分被假定为 jQuery 选择器，用于确定要加载的内容。

我们可以修改上面的示例以仅使用获取的文档的一部分:

$( "#result" ).load( "ajax/test.html #container" );

执行此方法时，它会检索 ajax/test.html 的内容，然后 jQuery 会解析返回的文档以找到 ID 为 container 的元素。此元素及其内容被插入到 ID 为 result 的元素中，其余检索到的文档将被丢弃。

jQuery 使用浏览器的 .innerHTML 属性来解析检索到的文档并将其插入到当前文档中。在此过程中，浏览器通常会从文档中过滤元素，例如 、 或 元素。因此，.load() 检索的元素可能与浏览器直接检索的文档不完全相同。

---

在您的情况下，您需要将代码修改为:

$("#result").load("https://abc/external.html #test")