Getting IFRAME Window (And Then Document) References With contentWindow
Posted May 22, 2009 at 9:48 AM
Perviously, when I had an IFRAME tag on a page and I wanted to get access to the document object within that IFRAME, I would use the top window's "frames" collection:
Launch code in new window » Download code as text file »
- window.frames[ "my-frame" ].document
I did this because I could never figure out how to get at the document object directly from the IFRAME reference itself. However, just yesterday, in a comment about my jQuery print() plugin, Todd Rafferty pointed me to an existing print plugin that was able to accomplish this goal. The code, made references to an IFRAME property called "contentWindow". I had never seen this before, but after some Googling, it looks like it was originally an IE property of IFRAMEs that granted access to the "window" of the IFRAME.
Once I have the window object of the IFRAME, I can easily get at the document from it. But, I was nervous that this might be an IE-only property, so I set up the following test using both window-reference methodologies:
Launch code in new window » Download code as text file »
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>Getting IFrame Window Reference With contentWindow</title>
- <script type="text/javascript" src="jquery-1.3.2.js"></script>
- <script type="text/javascript">
-
- // When the document has loaded, add an iFrame.
- $(
- function(){
- var jFrame = $( "<iframe name='my-frame'>" );
- var objDoc = null;
-
- // Set frame properties and add it to the body.
- jFrame
- .css( "width", "400px" )
- .css( "height", "100px" )
- .appendTo( $( "body" ) )
- ;
-
- // Now, we are going to use two methods for getting
- // the iFrame window reference and thereby the
- // document reference such that we can write to it.
-
- // Use FRAMES array:
- objDoc = window.frames[ "my-frame" ].document;
-
- objDoc.write( "Gotten via FRAMES <br />" );
-
- // Use the contentWindow property of the iFrame.
- objDoc = jFrame[ 0 ].contentWindow.document;
-
- objDoc.write( "Gotten via contentWindow <br />" );
-
- // Close the document.
- objDoc.close();
- }
- );
-
-
- </script>
- </head>
- <body>
-
- <h1>
- Getting IFrame Window Reference With contentWindow
- </h1>
-
- <p>
- An iFrame will be added below this:
- </p>
-
- </body>
- </html>
When running this code, I got the following output on FireFox, IE (6,7), Safari, and Chrome:
| | | | | |
| |  | | ||
| | | |
Rock on! It looks like contentWindow returns the window reference of the IFRAME on all relevant browsers. That's an awesome property. Thanks Todd!
Download Code Snippet ZIP File
Post Comment | Ask Ben | Permalink | Other Searches | Print Page
Newer Post
Ask Ben: Collecting And Relating Sibling XML Nodes In A ColdFusion XML Document
Older Post
Ask Ben: Print Part Of A Web Page With jQuery
Reader Comments
Ben,
There's also a contentDocument property, but not as widely supported (IE doesn't support it, although it's part of the W3C standard). In the past, I've used something like
var iframeDocument = iframeObject.contentDocument ? iframeObject.contentDocument : iframeObject.contentWindow.document;
Having said that, referencing the frames collection works pretty much everywhere, and as your tests show, I think all the modern browsers implement contentWindow.
@Ryan,
Yeah, I came across contentDocument in my Googling, but as you are saying, it's not widely supported. I think getting the window reference is a nice route as you need the window reference a lot as well.
It would be nice if they all supported contentDocument, but until then :)
@Ben
http://scheduler.cfunited.com/js/scheduler.js
If you search for "getIFrameDocument" that's what I used. It works in basically every browser, new and old. :)
@Elliott,
Looks pretty solid. For funzies, I think you could turn this into short-circuit evaluation:
return(
. . . . iframe.contentDocument ||
. . . . iframe.contentWindow.document ||
. . . . iframe.document
. . . . );
You rock men, i've been looking for this solution for hours ;)
Thank you
Can I use the iframe to fill up forms on another website. For example my task is to open websites with filled up forms. What can I do to do this?
In fact I want to open other websites in iframe and want to use javascript to hold the document inside iframe and to fill up forms inside it.
@Muhammad
You can only interact with the document of an iframe if the document it loaded is on the same domain.
So it would depend on what you meant by "other websites".
