jQuery set iFrame onLoad attribute

Question

I need to trigger a function when the iframe loads a second time (the user clicks some link in the iframe). When the iframe page changes I can set the window location to the iframe src.

What I thought would be best is to set an onLoad attribute on the iframe element after the first load. I guess I would need the live event to tell when the iframe has been created, since it's dynamic.

This is what I had in mind:

$(document).ready(function() {
    $('#tenant_login').fancybox({type:'iframe'});
    $('#tenant_login').click(function() {
        $('#fancybox-frame').attr('onload', function() {
            window.location = $('#fancybox-iframe').attr('src');
        });
    });
});

If it matters the iframe is not cross domain.

You are trying to have users click around on some other web page via an iframe, then at some point, wherever they are, redirect them to that same URL in a regular window? — Andrew Atkinson
– Andrew Atkinson, Commented Aug 19, 2010 at 5:11
@Andy Atkinson Yes that's exactly what I'm trying to do. What I noticed is the src of the iframe never changes. I just used a target="_top" attribute on the particular link I wanted to open in a regular window it solved the problem. I guess I could bind an event to the iframes DOM somehow, but "_top" was easier. — Benbob
– Benbob, Commented Aug 19, 2010 at 5:35
Hey Keyo, can you explain how you solved your problem and mark your answer as accepted? This is drawing a lot of traffic and Googles fairly highly for iframe onload related problems — it'd be good to see the solution! — Barney
– Barney, Commented Apr 11, 2013 at 9:01
I've added an answer. I think Stefan's answer is probably more useful for solving the original question I asked. — Benbob
– Benbob, Commented Apr 11, 2013 at 10:52

Benbob · Accepted Answer · 2013-04-11 10:39:29Z

2

$("#fancybox-iframe").load(function(){
            window.location = $('#fancybox-iframe').attr('src');
});

This will allow you to redirect the parent window when the iframe loads a different page.

edited Apr 11, 2013 at 10:39

Benbob

14.3k19 gold badges84 silver badges115 bronze badges

answered Apr 11, 2013 at 9:24

Stefan Dunn

5,5537 gold badges50 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Benbob · Accepted Answer · 2013-04-11 10:50:21Z

0

If you have control of the iframe content, as I did setting a target="_top" attribute on the hyperlink means the browser will open the link in the browser window rather than the iframe.

Main document:

<html>
  <body>
     <h1>The Main Page</h1>
     <iframe src="myIframe.html" />
  </body>
<html>

Iframe document:

<h2>The IFRAME</h2>
<a href="something.html" target="_top" >
  This will open in the browser window rather than any iframe it exists in.
</a>

If you can't put target="_top" on the links of the iframe DOM you will need to capture the click events with javascript from the parent DOM.

answered Apr 11, 2013 at 10:50

Benbob

14.3k19 gold badges84 silver badges115 bronze badges

Collectives™ on Stack Overflow

jQuery set iFrame onLoad attribute

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related