更改资源的 url 时如何检查 403 和 404 错误？答案

【问题标题】：How to check for 403 and 404 errors when changing the url of a resource?更改资源的 url 时如何检查 403 和 404 错误？
【发布时间】：2012-03-07 02:29:15
【问题描述】：

我正在为 TamperMonkey Chrome 扩展程序制作用户脚本（这与为 GreaseMonkey 制作用户脚本相同）。

在我的脚本中，我正在通过 document.getElementsByTagName() 迭代一些文档外部资源（img、css、链接、脚本），并且我正在将它们的 src 或 href 属性更改为另一个 url。

在大多数情况下，新网址可以正确加载，但在某些情况下，它会以来自我的代理的 404 或 403 错误结束。

你能给我一些关于如何正确处理（如果可能的话）“资源不能用新的 url 加载”的指示吗？另外，在请求的资源导致重定向 url 的情况下，是否可以告诉我资源已被重定向（如何检查 302）？

我现在使用的是纯 JavaScript，没有 jquery。但如果 jQuery 能帮到我，我愿意采纳。

我考虑过为每个资源 url 测试 XMLHttpRequest 结果中的标头，但在我看来，这就像使用大炮杀死苍蝇一样。我宁愿使用适当的处理程序，以防资源不可用时触发。

编辑：或者，如果 chrome 对每个加载的对象都有一个我可以检查的状态属性，我会没问题...

【问题讨论】：

标签： javascript jquery google-chrome greasemonkey tampermonkey

【解决方案1】：

我会检查 javascript 中的 document.styleSheets。

这是一个适用于样式表的工作 jsfiddle：

http://jsfiddle.net/BQxBz/4/

var styleSheetExists = function(name) {
    for (var i in document.styleSheets) {
        if (typeof document.styleSheets[i] == "object") {
            link = document.styleSheets[i].href;
            if (link === null) {
                continue;
            }

            if (link.indexOf(name, link.length - name.length) !== -1) {
                return true;
            }
        }
    }
    return false;
}

$(document).ready(function() {
    console.log(styleSheetExists('jquery-ui.css'));
    console.log(styleSheetExists('doesnotexist.css'));
});

对于 javascript，我会使用对象检测：因此查看某个对象是否应该由某个脚本加载。例如检测jQuery：

http://jsfiddle.net/TqQtE/

if (typeof jQuery == "undefined")
{
  // load jquery
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

【讨论】：

非常感谢您让我了解 jsfiddle，原型设计似乎很有趣。我将尝试使用样式表方法。关于脚本部分，我无法测试已知对象，因为我事先不知道脚本中有什么。

【解决方案2】：

这只是一个想法，我不确定是否可行，但可能值得一试。代码解释：

var errorHandler = function(event) {
  // Do something if the script could not be loaded
};

var scripts = document.getElementsByTagName("script");
for(var i = 0, len = scripts.length; i < len; i++) {
  scripts[i].onerror = errorHandler;
  scripts[i].src = /* Some way to get your new src */;
}

我不确定当您更改现有 script 标记的 src 时，onload、onerror 处理程序是否有效。

请报告您的发现。 ;)

【讨论】：

【解决方案3】：

我考虑过测试 XMLHttpRequest 结果中的标头每个资源 url，但在我看来就像使用大炮杀死一只苍蝇。

嗯...这就是我所做的，但我们的脚本有不同的目的。

    function conectar(metodo, endereco, resposta, corpo) {
        callback = function(xhr) { resposta(xhr) };
        GM_xmlhttpRequest({
            "method"    : metodo,
            "url"       : endereco,
            "onerror"   : callback,
            "onload"    : callback,
            "headers"   : {'Content-Type' : 'application/x-www-form-urlencoded'},
            "data"      : corpo
        });
    }

然后

conectar('HEAD', linkkhref, resp)

在这里查看我的：RandomProxyHeader

【讨论】：