Determine if a site will open in an iframe

Question

If an image fails to load on a page we have the onerror function which can load a default image.

Is there an equivalent for loading a site into an iFrame?

E.g. mashable.com can be loaded into an iFrame whereas many social sites e.g. Facebook, Twitter et al can not.

So when a user tries to load e.g. Twitter and nothing is shown, I'd like a message to show saying "this page cannot be displayed" and then open the link in a new tab instead and direct them after say 3 seconds.

Not sure if this is possible.

Answer 1

Due to security restrictions, that isn't possible from the client side. However you have two alternative solutions:

• Do a call from the server and check for X-Frame-Options headers.
• Alternatively you can set a timeout and assume the page can't be loaded if the load event isn't fired after some time.

See Catch error if iframe src fails to load . Error :-"Refused to display 'http://www.google.co.in/' in a frame.."

Answer 2

I had the same problem and I was using AngularJS, I got it working using the method below. Hope it helps..

1. Set an iframe in the html

   <div ng-if="!iframeError">
     <iframe id="iframeID" src="http://www.google.com" height="500px"></iframe>
   </div>
   <div ng-if="iframeError">Not Supported</div>
   

2. I set an interval for listening if the iframe is available

   var ife = setInterval(function () {
   if ($("#iframeID")) {
    $("#iframeID").load(function (ev) {
     var iframe = $("#iframeID");
     var iframeDocument;
     try {
     iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
     }
     catch (e) {
      window.open("http://www.google.com");
      $scope.iframeError = true;
      //I opened the url in new page
      //you can handle it any way you want
     }
    });
    clearInterval(ife);
    }
   }, 200);