当jQuery解析html - Chrome扔网:: ERR_FILE_NOT_FOUND [英] When jQuery parsing html - Chrome throwing net::ERR_FILE_NOT_FOUND

问题描述

以下是我的代码：

 < script src =https：// ajax .googleapis.com / AJAX /库/ jquery的/ 2.1.1 / jquery.min.js>< /脚本>  

在Chrome中出现错误：

  GET文件： ///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） Suppress无法加载资源：net :: ERR_FILE_NOT_FOUND在Chrome打包应用程序中 - 控制台顶部的过滤器图标，并勾选»隐藏网络消息«

这对我来说还不够好。我知道文件不存在 - 我是 $。get '一些远程HTML文件我知道相对路径不工作。

---

我试过了：

  window.onerror = function（e）{
 
}; 
  

---

我想更好地了解发生了什么。 Chrome浏览器看到类似于图片的东西，并试图主动加载它？

独立代码示例：

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

请以控制台中没有红色的方式进行破解：）

b
$ b

更新：

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

这是我使用的代码：

  $ .get（https：// test_server，function（data）{
 var model_names = $（data）.find（ （函数（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，\\\
））; 
}）; 
  

https：// test_server 包含< li> 包含必要属性的节点。 我认为最好呈现隔离测试案例并关注问题。不过，我感谢你的好奇心，建议和问题，为什么我这样做...... （请不要在我以这种方式连接HTML时对我进行有关XSS攻击的教育） 现在据我了解情况，我可以提供一个答案

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

如果字符串看起来像是一个HTML片段，那么jQuery将尝试按照HTML

所述创建新的DOM元素

这里： jQuery解析html而不加载图片

html = html.replace（/< img [^>]> / g，）;

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

这看起来像是一场艰苦的战斗 - 我不得不这样做：

• 通过regexp查找图片


• 知道哪些是正确的图片
  
• 解压缩属性

所有这些都不需要使用便捷的解析方法。

---

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

Here is my code:

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>

In Chrome I'm getting error:

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

(it doesn't throw this error in IE Edge, IE 11, Firefox 40)

I want to solve it in a way that if any of my clients / stakeholders visit the website there is no red in console...

---

From related questions:

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«"

It's not good enough for me. I know file is not there - I'm $.get'ing some remote HTML file I know that relative paths are not working. Also changing my browser setting will not change behaviour on other people machines.

---

I tried :

    window.onerror = function(e) {

    };

---

I would like to better understand what is happening.

Chrome sees something that resembles an images and tries to load it pro-actively?

Standalone code sample:

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

Please hack it in a way that there is no red in console :)

---

UPDATE:

There were couple questions in the comments so I think we need to establish (reptile brain) that I'm not a threat. Then we can establish whether the question is properly formed / whether I'm doing the right approach.

This is the code I'm using:

        $.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 serves HTML that contains <li> nodes that contain required attributes.

I thought it is better to present an isolated test case and focus on the issue. However I appreciate your curiosity, suggestions and questions why I'm doing this that way... (please don't educate me about XSS attacks when concatenating HTML the way I do this right now)

解决方案

Now as I understand what's going on I can provide an answer

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

Here: jQuery parse html without loading images

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

(some clever regexp to remove image tags)

It looks like an uphill battle - I'd have to:

• find images by regexp
• know which are the right ones
• extract attributes

All that without using convenience parse methods.

---

Still not sure why error appears only in Chrome - see my comment: When jQuery parsing html - Chrome throwing net::ERR_FILE_NOT_FOUND

这篇关于当jQuery解析html - Chrome扔网:: ERR_FILE_NOT_FOUND的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！