Question

HTML link element支持onerror处理程序对加载链接资源的错误作出反应。但是，onerror处理程序接受Event对象，该对象似乎没有携带有关实际错误原因的任何信息。例如，由于某些内部服务器错误（即HTTP 500）或某些安全限制（即HTTP 403），加载引用的资源可能会失败。

有没有办法确定link元素无法加载其资源的根本原因？

Answer 1

感觉就像一个肮脏的黑客，但你可以重播它作为AJAX请求来获取状态代码（假设错误不是间歇性的）：

var link = document.createElement('link');

link.rel = 'stylesheet';
link.href = 'mystylesheet.css';
link.onerror = function (event) {
    xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            console.log('error on ' + link.href + ' request:', xmlhttp.status);
        }
    }

    xmlhttp.open("GET", link.href, true);
    xmlhttp.send();
};

document.body.appendChild(link);

http://jsfiddle.net/jevrackq/

作为Kaiido specified（在Firefox中显示错误，但不是Chrome），这只会处理与服务器相关的HTTP错误，而不是浏览器端的错误（例如，元素的错误mimetype，例如，rel='stylesheet'，但在标记中给出了image/jpeg。

有没有办法确定HTML链接元素的错误原因？

1 个答案: