当jQuery解析html时 - Chrome throw net :: ERR_FILE_NOT

这是我的代码：

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 - "This error means that file was not found."

2）Suppress "Failed to load resource: net::ERR_FILE_NOT_FOUND" in Chrome Packaged App - "filter icon at the top of the console, and tick »Hide network messages«"

它是一个远程HTML文件，我知道相对路径不起作用 . 更改我的浏览器设置也不会改变其他人机器上的行为 .

我试过了：

window.onerror = function(e) {

    };

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

Chrome会看到类似于图片的内容，并试图主动加载它？

独立代码示例：

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

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

更新：

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

这是我正在使用的代码：

$.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 .

我认为最好提出一个 isolated test case and focus on the issue . 但是，我很感激你的好奇心，建议和问题，为什么我这样做...（请不要像我现在这样联系HTML时教我关于XSS攻击）

3 回答

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

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

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

这里：jQuery parse html without loading images

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

（一些聪明的正则表达式删除图像标签）

这看起来像一场艰苦的战斗 - 我必须：
- 通过regexp查找图像
- 知道哪些是正确的
- 提取属性
所有这些都没有使用便利解析方法 .

仍然不确定为什么错误只出现在Chrome中 - 请参阅我的评论：When jQuery parsing html - Chrome throwing net::ERR_FILE_NOT_FOUND
回复于 2024-04-26T19:45:23+08:00

Why this is happening

使用$.parseHTML时，将使用您的文档在DOMNode中解析所有HTML .

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

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

How to avoid this

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

如您的帖子所述，图像的所有相对路径都无法工作，因此您唯一的解决方案是用空图像替换这些相对路径 .

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>

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

回复于 2024-04-26T19:45:23+08:00

0

你可以简化你的问题"Can I suppress an 404 error when an image source is broken?"

答案是 NO ，您可以附加一个处理程序 <img src='...' onerror='' /> 但它将始终在404错误后调用，并且无法避免这种情况 .

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

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

回复于 2024-04-26T19:45:23+08:00

当jQuery解析html时 - Chrome throw net :: ERR_FILE_NOT_FOUND