使用腳本標記檢測Internet Explorer上的xml加載失敗

Question

是否存在僅客戶端方法來檢測托管在另一個域上的xml文件是否丟失（響應404）或使用Internet Explorer可用？ CORS不是一種選擇。 我只關心它的存在。

通過將<script>標記注入與“load”和“error”事件的回調相結合，Chrome和Firefox只存在一種客戶端方法。 下面是我在Firefox和Chrome瀏覽器控制台中放置的測試代碼。

在Internet Explorer中，無論文件是否存在，“readystatechange”事件始終會觸發。 我已經從'readystatechange'回調中檢查了返回的對象，我似乎無法找到現有文件的響應對象與不存在的文件中的響應對象之間的區別。

我還嘗試了<img> tag和<iframe>標簽注入，結果不如任何瀏覽器的<script>標簽注入有用。

function loadFile(urlOfDocument) {
    var element = document.createElement('script');
    element.async = true;

    element.onload = function() {
        // Works for Chrome and Firefox
        console.log("onload called");
    }
    element.onerror = function() {
        // Works for Chrome and Firefox
        console.log("onerror called");
    }
    element.onreadystatechange= function () {
        // IE 8, 9, 10
        console.log("onreadystatechange: ", element.readyState);
        if (this.readyState == 'complete') {
            console.log("loading complete");
        }
    }
    element.src = urlOfDocument;
    document.getElementsByTagName('head')[0].appendChild(element);
}

var urlOfDocument = "http://url.to.missing.file";
loadFile(urlOfDocument);

Answer 1

我沒有完全測試過，但它可能會起作用。 由於您希望加載XML，如果它確實存在且加載到腳本中，瀏覽器在解析文件時將拋出syntax error ，如果它返回404，則不會出現錯誤，因此您可以為IE添加以下內容

    if (this.readyState == 'loading') {
       window.onerror = function(e){
          if(! (e === "Syntax error") ) return;
          console.log("File Exits");
          window.fileExists = true;
       }
    }
   if (this.readyState == 'loaded') {
       //if we got here without an error the file is missing. 
       if(!window.fileExists){
           console.log("File is missing");
       }
       //clean up
       window.onerror = "";
    }

注意：這不適用於有效的腳本文件。

希望這可以幫助