如何在 Firefox 中检测 file:// URL 的脚本加载失败？答案

【问题标题】：How to detect a script load of a file:// URL fails in Firefox?如何在 Firefox 中检测 file:// URL 的脚本加载失败？
【发布时间】：2010-11-11 00:29:55
【问题描述】：

我想检测脚本标签（动态创建并添加到 DOM）是否加载失败。 onerror 事件有效，但 Firefox 中的 file:// URL 除外。

不幸的是，如果脚本标记的 src 是 file:// URL（或相对 URL 并且页面已加载），那么 described here 技术（除了超时，在我的情况下是不可接受的）似乎都不适用于 Firefox通过文件：// URL）

测试用例：

var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'doesnotexist.js');
script.onerror = function() { alert("Loading failed!"); }
document.getElementsByTagName('head')[0].appendChild(script);

将其加载到带有 file:// URL 的 HTML 页面中。 onerror 事件不会在 Firefox 中执行。从网络服务器加载，或者在 Safari 或 Chrome 上加载。

这对我来说似乎是一个错误。有什么已知的解决方法吗？

【问题讨论】：

你应该接受你的问题的答案。
@Marcel Korpel：他说超时不是一种选择，所以这行不通。
作为参考，当基于 file:// 的 URL 加载失败时，Firefox 不触发 error 事件的问题是 Bugzilla bug 621276。

标签： javascript firefox onerror

【解决方案1】：

var loadScript = function(scriptURL, failureCallback) {
    var script = document.createElement('script'),
        scriptProtocol = scriptURL.match(/^([a-zA-Z]+:)\/\//);
    script.setAttribute('type', 'text/javascript');

    if (navigator.product === 'Gecko' &&
        navigator.userAgent.indexOf('KHTML') === -1 &&
        window.location.protocol === 'file:' &&
        (!scriptProtocol || scriptProtocol[1] === 'file:')) {

        var req = new XMLHttpRequest();
        req.open('GET', scriptURL, true);
        req.onreadystatechange = function () {
            if (req.readyState === 4) {
                if (req.status === 0)
                    script.textContent = req.responseText;
                else
                    failureCallback();
            }
        };
        try {
            req.send(null);
        }
        catch (e) {
            failureCallback();
        }
    }
    else {
        script.setAttribute('src', scriptURL);
        script.onerror = failureCallback; 
    }

    document.getElementsByTagName('head')[0].appendChild(script);
};

loadScript('doesnotexist.js', function() { alert('Loading failed!'); });

有点小技巧，但它似乎有效。

【讨论】：

正如 Tom 指出的那样，这种方法的一个缺点是如果脚本通过 XHR 加载，您会丢失调试元数据。

【解决方案2】：

如果您使用 Pauls 解决方案检索文档但忽略了结果会怎样。如果它加载创建你的脚本标签。缺点是文件会加载两次。

【讨论】：

是的，这是我目前采用的解决方案，但我对此并不满意 ;)