Detect with JavaScript that a script is blocked (by web filtering, firewall, etc.)

Question

In Internet Explorer <9, at least, linking to a blocked resource (due to firewalls, WebSense, etc.) will return an error. For instance, if Facebook is blocked, linking to the Facebook SDK JavaScript file will result in an error in Internet Explorer.

Is it possible to test if a website is blocked in JavaScript, before linking to the external JavaScript file, for the following purposes:

Prevent a JavaScript error from showing up in Internet Explorer
If code depends on the external file, it can be prevented from running, to cause further JavaScript errors relating to the lack of the external library

Similar question: http://stackoverflow.com/questions/2027849/how-to-trigger-script-onerror-in-internet-explorer/2032014#2032014 — LoveAndCoding, Nov 21 '11 at 06:59
Two of the other answers in the question @Ktash mentions might also be useful to others: http://stackoverflow.com/questions/2027849/how-to-trigger-script-onerror-in-internet-explorer/2027892#2027892 uses window.onerror and http://stackoverflow.com/questions/2027849/how-to-trigger-script-onerror-in-internet-explorer/8066204#8066204 uses onload. — ToolmakerSteve, Aug 12 '14 at 00:06

Abdullah Jibaly · Accepted Answer · 2011-11-21T06:57:41.050

Looking at the facebook SDK, looks like it gets injected asynchronously by inserting a script element into the head. This means all you have to do is create the callback handler and if facebook is blocked then that will never be called. You shouldn't get any browser script error. So you should be able to do something like:

<div id="fb-root"></div>
<script>
  var FACEBOOK_BLOCKED = true;
  window.fbAsyncInit = function() {
    FACEBOOK_BLOCKED = false;
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelURL : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      oauth      : true, // enable OAuth 2.0
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

For a more general use case, a similar approach will work with any script that you can call using a JSON-P approach. This, of course, requires that the server takes a callback function as a parameter (or automatically calls a pre-named function):

// Load some SDK Asynchronously
(function(d){
    var js = d.createElement('script');
    js.src = "http://www.example.com?callback=myfunc";
    d.getElementsByTagName('head')[0].appendChild(js);
}(document));

var SCRIPT_LOADED = false;
var myfunc = function() {
   SCRIPT_LOADED = true;
}

UPDATE

Just came across this method, you might want to give it a shot:

function loadScript(sScriptSrc, oCallback) {
    var oHead = document.getElementById('head')[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = sScriptSrc;
    // most browsers
    oScript.onload = oCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            oCallback();
        }
    }
    oHead.appendChild(oScript);
}

The Facebook SDK was simply an example. Would this code work for any script that I find? — Kevin Ji, Nov 21 '11 at 05:03
No it won't, I updated the answer for the more general use case. — Abdullah Jibaly, Nov 21 '11 at 06:59
(re `loadScript` in your UPDATE): Won't oCallback get called TWICE, if using a version of IE that supports both onload and onreadystatechange? [I don't have a reason to use this at this time, so I haven't bothered testing. But anyone trying this should probably test it out in different IEs, or have their callback set a global flag, and do nothing if it has already run.] — ToolmakerSteve, Aug 12 '14 at 00:50

score 0 · Answer 2 · answered Nov 20 '11 at 22:45

0

you can use jquery's getScript function, it has a success function that is only executed if the script has been loaded , check it out here : http://api.jquery.com/jQuery.getScript/

answered Nov 20 '11 at 22:45

Sina Fathieh

1,727
1
20
35

I would prefer not to have to resort to jQuery; however, if using jQuery is the only solution, I will. – Kevin Ji Nov 21 '11 at 05:04
I looked into getScript but I believe that uses ajax so it may not work if the javascript file you're pulling is not hosted on your domain. – Abdullah Jibaly Nov 21 '11 at 06:50

Detect with JavaScript that a script is blocked (by web filtering, firewall, etc.)

2 Answers2