javascript - 当 jQuery 解析 html - Chrome 抛出 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) 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 - “在控制台顶部过滤图标，然后勾选 »Hide network messages«”

这对我来说还不够好。我知道文件不存在 - 我正在 $.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

if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML

此处:jQuery parse html without loading images

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

(一些聪明的正则表达式来删除图像标签)

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

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

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

---

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