javascript - 在 ajax 响应上使用 jQuery 会触发额外的网络请求

Question

我正在编写一个小脚本，它从页面获取一堆链接，获取它们并在结果中搜索一些数据。
例如。像这样:

let listLinks = $('.item a');

listLinks.each(function() {
    let url = this.href;

    fetch(url, {
        credentials: 'include'
    })
    .then(response => response.text())
    .then(function(html) {
        let name = $('#title h1', html);
    })
});

我的问题是，一旦我们到达响应上的选择器，浏览器开发工具中的网络选项卡就会亮起，请求大量资源，就好像某些东西(jquery？)正在加载整个页面!

这到底是怎么回事？

我不想加载整个页面(资源和所有)，我只想从 html 响应中获取一堆文本!

编辑:经过更多的审查，我发现它只对 ajax 页面上的任何图像发出网络请求，而不是脚本或样式表。

如果我尝试以其他方式处理 html，它不会发出这些请求 - 例如，调用 .indexOf() 。仅当我决定通过 jquery 遍历它时。

编辑2:在开发工具中查看，网络选项卡有一个“启动器”列。它说这是请求的发起者:github code 。不过我不知道该怎么办……

附注Inb4 "just regex it".

Answer 1

我发现了原因:

我上面的代码(相关行):
$('#title h1', html)
相当于
$(html).find('#title h1')

和$(html)本质上creates DOM elements 。实际的、文字的 DOM 对象。

当您创建<img>时元素(我解析的 HTML 包含)，浏览器自动发出网络请求。
相关 StackOverflow 问题: Set img src without issuing a request

使用问题中的代码，创建的 DOM 元素仍然与当前文档关联(如所述 here )，因此浏览器会自动请求新的 <img> 。目前还没有。 正确的解决方案是创建一个单独的文档，例如

let parser = new DOMParser();
let doc = parser.parseFromString(html, "text/html");
let name = $('#title h1', doc);

在这种情况下不会发出任何网络请求。

JSFiddle