Do NOT use firebug with this page! (It may crash your browser.)


Hey all! I just noticed that I’ve been getting a lot of traffic from a post I made WAY back in the day at http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/, and since I’ve changed this site, everybody was hitting 404’s. This a post of what used to be here:

Frame from the same domain as parent.

Not yet loaded…

Frame from a different domain as parent (lifeinnovative).

Not yet loaded…


Browsers follow similar rules with iframes as they do with xml_http_requests: that is, it blocks cross-domain access.

For example, if I am running the above script from the page: http://www.liveintensely.com/parent.html, I can read and write to the frame which’ source is http://www.liveintensely.com/iframe.html. HOWEVER, if the frame’s source is on a different domain, like http://lifeinnovative.com, javascript is denied both read and write access to the frame.

Check out the above example, and (simplified) source code below:

[html] <html> <head> <title>jQuery and Frames</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> jQuery( function() { $(‘#frame1’).load( function(){ $(this.contentDocument).find(‘body’).html(‘This frame was modified with jQuery! Yay!!!’) }); $(‘#frame2’).load( function(){ $(this.contentDocument).find(‘body’).html(‘This frame was modified with jQuery! Yay!!!’) }); }); </script> </head> <body> <h2>jQuery and Frames</h2> <h4>Frame from the <i>same</i> domain as parent.</h4> <iframe id="frame1" src="iframe.html"></iframe> <h4>Frame from a <i>different</i> domain as parent.</h4> <iframe id="frame2" src="http://lifeinnovative.com/frame_for_liveintensely_demo.html"></iframe> </body> </html> [/html]