How to check errors 403 and 404 when changing a resource URL?

Question

I am doing usercript for the Chrome TamperMonkey extension (this is the same as doing usercript for GreaseMonkey).

In my script, I repeat some external document resources (img, css, links, scripts) through document.getElementsByTagName() , and I change their src or href attributes to a different URL.

In most cases, the new URL loads properly, but in some cases it ends with a 404 or 403 error from my proxy.

Could you give me some guidance on how to handle (if possible) correctly, "the resource cannot be loaded with the new URL"? In addition, in the case where the requested resource leads to a redirected URL, can I be informed that the resource has been redirected (how to check 302)?

I am using bare javascript, without jquery. But if jQuery can help me, I am ready to accept it.

I considered testing the headers from the XMLHttpRequest result for each resource URL, but it seems to me that I'm using an artillery gun to kill a fly. I would prefer to use the correct handler, which can only be run in case of an unavailable resource.

Edit : as an alternative, I would be fine if chrome had a status property for every loaded object that I could check ...

Answer 1

I would check document.styleSheets in javascript.

Here is a working jsfiddle for style sheets:

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')); }); 

For javascript, I would use object detection: this way, see if a specific object should be loaded by a specific script. For example, to detect 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) } 

Answer 2

This is just an idea, I'm not sure about the viability, but it might be worth a try. Explanation in code:

 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 */; } 

I'm not sure if onload , onerror handlers onerror when changing src existing script tag.

Please report on your results .;)

Answer 3

I considered testing the headers from the XMLHttpRequest result for each url resource, but it seems to me that using artillery weapons to kill a fly.

Well ... what I did, but our scripts have different goals.

  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 }); } 

and then

 conectar('HEAD', linkkhref, resp) 

check here: RandomProxyHeader