【问题标题】：When jQuery parsing html - Chrome throwing net::ERR_FILE_NOT_FOUND当 jQuery 解析 html - Chrome 抛出 net::ERR_FILE_NOT_FOUND
【发布时间】：2015-12-15 16:02:20
【问题描述】：

这是我的代码：

var some_HTML_string = "<img src='images/relative/path.jpg'>";
console.log("about to call $.parseHTML");
$.parseHTML(some_HTML_string)
console.log("I've just called $.parseHTML");

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

在 Chrome 中出现错误：

GET file:///C:/Users/mstefanow/Desktop/images/relative/path.jpg net::ERR_FILE_NOT_FOUND

（它不会在 IE Edge、IE 11、Firefox 40 中抛出此错误）

我想解决这个问题，如果我的任何客户/利益相关者访问该网站，控制台中不会出现红色...

来自相关问题：

1) Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js - “这个错误意味着找不到文件。”

2) Suppress "Failed to load resource: net::ERR_FILE_NOT_FOUND" in Chrome Packaged App - "在控制台顶部过滤图标，并勾选»隐藏网络消息«"

这对我来说还不够好。我知道文件不存在 - 我正在 $.get 处理一些远程 HTML 文件，我知道相对路径不起作用。更改我的浏览器设置也不会改变其他人机器上的行为。

我试过了：

    window.onerror = function(e) {

    };

我想更好地了解正在发生的事情。

Chrome 看到类似于图像的内容并尝试主动加载？

独立代码示例：

https://gist.github.com/stefek99/3245c09869b04ebfe49a

请以控制台中没有红色的方式破解它:)

更新：

cmets 中有几个问题，所以我认为我们需要确定（爬行动物的大脑）我不是威胁。然后我们可以确定问题是否正确形成/我是否采用了正确的方法。

这是我正在使用的代码：

        $.get("https://test_server", function(data) {
            var model_names = $(data).find("li").map(function (index, li) {
                return $(li).data("name");
            });

            var output_html = model_names.map(function (index, name) {
                return "<img src='https://test_server/api/preview/" + name + "' data-name='" + name + "'><br>";
            })

            $("#thumbnails").html(Array.prototype.join.call(output_html, "\n"));
        });

https://test_server 提供包含 <li> 节点的 HTML，这些节点包含必需的属性。

我认为最好提供一个孤立的测试用例并专注于问题。但是，我感谢您的好奇心、建议和问题，为什么我会这样做... （请不要在以我现在这样做的方式连接 HTML 时告诉我有关 XSS 攻击的知识） p>

【问题讨论】：

您是通过在 Chrome 中打开（双击）一个 .html 文件来加载（和开发）它，还是使用网络服务器加载 html 和 js？
这只是为了测试环境吗？当您知道文件不存在时，为什么要尝试解析图像标签的 html？为什么不直接注释掉该行，直到您推送到该文件将存在的生产环境？我不明白你到底想在这里实现什么。
$.parseHTML(some_HTML_string) 为什么必须这样做？如果您打算将此字符串放入带有.append(),.prepend(), appendChild(), innerHTML, .html() 的DOM 中，则等会起作用。浏览器可以有效地做到这一点。
在生产中我会 $.get 一些远程 HTML。我会解析它。我想达到什么目的？避免在控制台中出现红色 + 更好地了解正在发生的事情。
这可以通过异常处理来解决。我的意思是如果该项目可用然后加载它，否则为它放置一些虚拟 html。

标签： javascript jquery html google-chrome google-chrome-devtools

【解决方案1】：

为什么会这样

当使用$.parseHTML 时，您的所有 HTML 都会在 DOMNodes 中与您的文档一起解析。

所以<img src="animage.png"/> 结果为

var img = document.createElement("img");
img.src = "animage.png"; // start loading image

如何避免这种情况

您无法阻止加载图像时在控制台中显示错误。

如您的帖子中所述，图像的所有相对路径都不起作用，因此您唯一的解决方案是将这些相对路径替换为空图像。

var htmlString = '<img class="aclass" src="images/relative/path.jpg" anattribute/>\
<img src="/animage">\
<img class="aclass" src="images/relative/path.jpg" anattribute/>';

htmlString = htmlString.replace(/(img[^>]+src=(?:"|'))([^\/][^'"]+)/g, "$1//:0");
$.parseHTML(htmlString);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;

我不是正则表达式专家，我想它可以改进。

【讨论】：

我实际上查看了文档-api.jquery.com/jQuery/#jQuery2-“如果字符串看起来是 HTML sn-p，jQuery 会尝试按照 HTML 的描述创建新的 DOM 元素”-我是仍然困惑为什么其他浏览器不抛出错误......（或者他们可能会抛出但我无法找到它）
@MichalStefanow 刚刚在 FF 上测试，我得到了同样的 404 not found 错误
@MichalStefa 现在你至少应该看到https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js 200 OK
当我转到“网络”选项卡时，我看到 jquery.min.js，实际上它是 304（未修改）...关键是：没有红色 404：/

【解决方案2】：

您可以将问题简化为 “当图像源损坏时，我可以抑制 404 错误吗？”

答案是否，你可以附加一个处理程序<img src='...' onerror='' />，但它总是会在404错误之后被调用，没有办法避免。

这正是.parseHTML 正在做的事情，在您的情况下，它调用jQuery.buildFragment，它将根据给定的字符串创建元素树。它使用innerHTML 将元素加载到默认或自定义上下文中。

实现目标的唯一方法是在解析字符串之前检测图像，尝试通过对服务器端脚本的请求加载它们，该脚本将处理尝试并返回图像或默认图像。

【讨论】：

【解决方案3】：

现在我知道发生了什么，我可以提供答案

http://api.jquery.com/jQuery/#jQuery2

如果字符串看起来是 HTML sn-p，jQuery 会尝试按照 HTML 的描述创建新的 DOM 元素

这里：jQuery parse html without loading images

html = html.replace(/<img[^>]*>/g,"");

（一些巧妙的正则表达式来删除图像标签）

这看起来像是一场艰苦的战斗 - 我必须：

通过正则表达式查找图像
知道哪些是正确的
提取属性

所有这些都没有使用方便的解析方法。

仍然不确定为什么错误只出现在 Chrome 中 - 请参阅我的评论：When jQuery parsing html - Chrome throwing net::ERR_FILE_NOT_FOUND

【讨论】：