使用脚本标记检测Internet Explorer上的xml加载失败

Question

Is there a client-side only method to detect if an xml file hosted on another domain is missing (response 404) or available using Internet Explorer? CORS is not an option. I only care of its existence.

A client-side only method exists for Chrome and Firefox by combining <script> tag injection with callbacks to the 'load' and 'error' events. Below is the test code I place in the browser console for Firefox and Chrome.

In Internet Explorer, the 'readystatechange' event always fires regardless if the file exists or not. I've examined the returned object from the 'readystatechange' callback, and I can't seem to find a difference between a response object from an existing file and a response object from a non-existent file.

I've also experimented with <img> tag and <iframe> tag injection and the results are not as helpful as <script> tag injection for any browser.

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

I haven't tested this fully, but it might work. Since you are looking to load a XML, if it does exist and it loads into the script, the browser will throw a syntax error when it parses the file, vs if it returned a 404, there will not be an error, so you can add the following for 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 = "";
    }

Note: this will not work with a valid script file.

Hope this helps