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將元素加載到默認或自定義上下文中。

實現目標的唯一方法是在解析字符串之前檢測圖像，嘗試使用對服務器端腳本的請求加載它們，該腳本將處理嘗試並返回圖像或默認圖像。