10

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.

StudioTime
  • 22,603
  • 38
  • 120
  • 207
  • @MilchePatern — The question is asking about sites which block loading in an iframe, not URLs which are simply wrong. – Quentin Sep 16 '13 at 13:32
  • 1
    Humm, thanks .. i need a coffee. Related : http://stackoverflow.com/questions/4548984/detect-if-the-iframe-content-has-loaded-successfully – Milche Patern Sep 16 '13 at 13:33
  • 1
    See this answer : stackoverflow.com/questions/4548984/detect-if-the-iframe-content-has-loaded-successfully#answer-4637351 – Milche Patern Sep 16 '13 at 13:35

5 Answers5

4

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.."

Community
  • 1
  • 1
hectorct
  • 3,335
  • 1
  • 22
  • 40
  • 1
    *From the server* is easy. For example, if you are using PHP you can use http://php.net/manual/es/function.get-headers.php – hectorct Jul 28 '15 at 16:39
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);
Satpal Tanan
  • 1,108
  • 7
  • 17
0

if(frames){if(top.frames.length>0){ YOUR CODE HERE }}

if you want to remove parent the:

if(frames){if(top.frames.length>0){top.location.href=self.location;}}

aryan kumar
  • 141
  • 2
  • 12
0

You can wrap the code around:

if($("#iframe1").find('iframe').length > 0) {
    //Site allowed
}
else {
    //Site blocked.
}
ugo
  • 2,705
  • 2
  • 30
  • 34
user3534071
  • 1
  • 1
0
var isInIframe = (window.location != window.parent.location);

if (isInIframe) {
    alert("Window is in iframe");
    // Do what you want
    //top.location.href=self.location;
} else {
    alert("Window is not in iframe");
}
Palec
  • 12,743
  • 8
  • 69
  • 138
vinod
  • 2,850
  • 1
  • 18
  • 23
  • 2
    Please include explanation of what your code does and how it answers the question. If you get a code snippet as an answer, you may not know what to do with it. Answer should give the OP and future visitors guidance on how to debug and fix their problem. Pointing out, what the idea behind your code is, greatly helps in understanding the issue and applying or modifying your solution. – Palec Jul 06 '14 at 11:48
  • Please see the screen shot I placed here http://www.callpanipat.com/blog-discussion.php – vinod Jul 06 '14 at 14:46
  • When viewing the diff, try playing with the mode-changing buttons (inline, side-by-side, side-by-side markdown). Thus you can choose where you see the changes the best. – Palec Jul 06 '14 at 15:23