Hide the iframes whose content get blocked by proxy

I have a webpage with iframes. These iframes are for showing some external website data.

But problem arise when those 开发者_高级运维external servers get blocked in a network it gives a error that "The proxy server is refusing connections". It does not look good to me.

I want to hide all these blocked iframes or want to show some alternate data there.

It's not possible to check whether a page has not loaded. However, it's possible to use onload event handlers.

It's important to not rely on JQuery, because JQuery is also an external source which has to be loaded. Add this code within <script> tags after the last IFRAME element (often, at the end of the body). Code:

//Cannot rely on JQuery, as it has to be loaded
(function(){//Anonymous wrapper.
    var iframes = document.getElementsByTagName("iframe");
    var num_frames = iframes.length;
    //Function to add Event handlers
    var addLoad = window.addEventListener ? function(elem, func){
        elem.addEventListener("load", func, true);
    } : window.attachEvent ? function(elem, func){
        elem.attachEvent("onload", func);
    } : function(elem, func){
        elem.onload = func;
    };
    var success_load = 0;
    for(var i=0; i<num_frames; i++){
        addLoad(iframes[i], function(){
            this.dataSuccessfullyLoaded = true;
            success_load++;
        });
    }
    addLoad(window, function(){
         if(success_load < num_frames){
             for(var i=num_frames-1; i>=0; i--){
                 if(!iframes[i].dataSuccessfullyLoaded){
                     iframes[i].parentNode.removeChild(iframes[i]);
                     //Or: iframes[i].style.display = "none";
                 }
             }
         }
    });
})();

Fiddle: http://jsfiddle.net/3vnrg/

EDIT
Your proxy seems to send HTTP pages with status code 200. Another option is to include the CSS file, and check whether a CSS variable exists or not:

/*From http://static.ak.fbcdn.net/rsrc.php/v1/yb/r/CeiiYqUQjle.css*/
#facebook .hidden_elem{display:none !important}
#facebook .invisible_elem{visibility:hidden}

HTML:

<link rel="Stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/v1/yb/r/CeiiYqUQjle.css" />
<div id="facebook"><div class="hidden_elem invisible_elem"></div></div>

JavaScript (execute this code after all resources have been loaded):

if($("#facebook div").css("display") != "none" || $("#facebook div").css("visibility") != "hidden") disableFBFrame();
// Where disableFBFrame(); is a function which hides the frame.