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会尝试使用选择器来评估/请求源内的图像

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，更多的是如何创建元素以及当属性改变这些元素时会发生什么。例如，当img元素使用document.createElement('img')创建，然后src属性设置为imgElement.src = "link to image"时，这会自动触发位置{{1}处的图像加载}。

您可以在JavaScript Developer Console中运行它来自行测试：

src

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

所以你想要的是确保它不能解析图像var img = document.createElement('img'); img.src = "broken-link";，要么是要么 1）在现有DOM（src等）上应用jQuery，或者 2）让它解析并将字符串计算到DOM中并预先清理字符串（使用Regex或其他东西删除document.body标记）。请查看https://stackoverflow.com/a/11230103/2578205以从字符串中删除HTML标记。

希望它成功！

jQuery在外部文本请求图像

3 个答案: