jQuery 解析 html 时 - Chrome throwing net::ERR_FILE_NOT_FOUND

Question

这是我的代码：

 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");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在 Chrome 中，我收到错误：

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

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

我想以一种方式解决它，如果我的任何客户/利益相关者访问该网站，则控制台中没有红色...

---

从相关问题：

1) 无法加载资源：net::ERR_FILE_NOT_FOUND 加载 json.js - “此错误表示未找到该文件。”

2) 在 Chrome Packaged App 中抑制“Failed to load resource: net::ERR_FILE_NOT_FOUND” - “控制台顶部的过滤器图标，并勾选»隐藏网络消息«”

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

---

我试过 ：

    window.onerror = function(e) {

    };

---

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

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

独立代码示例：

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

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

---

更新：

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

这是我正在使用的代码：

        $.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 攻击）

Answer 1

现在，当我了解发生了什么时，我可以提供答案

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

如果字符串看起来是一个 HTML 片段，jQuery 会尝试按照 HTML 的描述创建新的 DOM 元素

此处： jQuery 解析 html 而不加载图像

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

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

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

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

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

---

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

Answer 2

为什么会发生这种情况

使用$.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);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

Answer 3

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

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

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

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