jQuery 在请求图像的外部文本上

Question

我正在开发一个 chrome 扩展程序，它使用 jquery 来解析页面的源代码以获取特定内容。例如，我正在查看维基百科以获取类别。

我通过

获取页面来源

chrome.tabs.executeScript(tabId, {
            code: "chrome.extension.sendMessage({action: 'getContentText', source: document.body.innerHTML, location: window.location});"
}, function() {
    if (chrome.extension.lastError)
         console.log(chrome.extension.lastError.message);
});

然后我正在侦听此消息（成功），然后使用 jquery 解析对象的 source 键，就像这样

if (request.action == "getContentText")
{
    //console.log(request.source);
    $('#mw-normal-catlinks > ul > li > a', request.source).each(function()
    {
        console.log("category", $(this).html());
    });
}

这按预期工作并记录了所有类别链接 innerHTML 的列表。然而，问题发生在 jQuery 选择器尝试加载包含在 request.source 中的图像时。这会导致错误，例如

GET chrome-extension://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Padlock-silver.svg/20px-Padlock-silver.svg.png net::ERR_FAILED

这些是有效链接，但是它们是从我的带有 chrome-extension:// 前缀（无效）的扩展中调用的（不需要）。我不确定为什么 jquery 会尝试 evaluate/request 使用选择器

来自源中的图像

Answer 1

我猜这是因为维基百科在其图像上使用相对路径（而不是 https:// 或 http://，只是 // - 所以加载的内容是相对于服务器的）。请求由 jQuery 发出，您可以看到 here how to fix this issue（以后，请确保搜索得更彻底）。

Answer 2

非常感谢@timonwimmer 在聊天中帮助我。我们碰巧同时找到了不同的解决方案

我的解决方案是使用正则表达式删除所有出现的图像。通过

var source = request.source.replace(/.*?\.wikimedia\.org\/.*?/g, "");

他已经是关于堆栈溢出的答案，这是从另一个答案派生的。如果你有兴趣this answer 完美

Answer 3

如果您给 jQuery 一个带有完整元素声明的字符串，它实际上会生成一个新的 DOM 元素，类似于调用 document.createElement(tagName) 并设置所有属性。例如：var $newEl = $("<p>test</p>") 或在您的情况下 img 标记带有 $("<img/>") 的元素。这将被解析并创建为新的 DOM HTML 元素并由 jQuery 包装，以便您可以查询它。

由于您传递了完整且有效的HTML 字符串，它首先将其解析为实际的DOM。这是因为 jQuery 使用内置的底层 document.querySelector 方法，它们作用于 DOM 而不是字符串——将 DOM 视为具有 id 和索引的数据库class 和查询的属性。例如，MongoDB 无法对原始 JSON 字符串执行查询，它需要先将 JSON 处理为 BSON 并将其全部索引，然后对其执行查询。

您的问题不在于 jQuery，而在于如何创建元素以及当这些元素的属性更改时会发生什么。例如，当使用 document.createElement('img') 创建 img 元素，然后使用 imgElement.src = "link to image" 设置 src 属性时，这会自动触发在位置 [=18= 处加载图像].

您可以在 JavaScript 开发者控制台中通过运行自己测试：

var img = document.createElement('img');
img.src = "broken-link";

请注意，在运行指出无法找到图像后，这可能会在您的控制台中显示错误。

所以你想要的是，确保它不会解析图像的 src，要么 1) 在现有的 DOM（document.body 等）上应用 jQuery，或 2) 让它解析字符串并将其评估为 DOM 并事先清理字符串（使用正则表达式或其他方法删除 img 标签）。查看从字符串中删除 HTML 标签。

希望一切顺利！

jQuery 在请求图像的外部文本上

jQuery on external text requesting images

javascript

jquery

google-chrome-extension