Why is iframe.contentWindow == null?

Question

I use the following code to dynamically create an iframe.

var iframe_jquery = $("<iframe>")
    .addClass("foo")
    .appendTo(container); // container is a jQuery object containing a <div> which already exists

Then, I want to access its contentWindow, but it's null:

var iframe = iframe_jquery.get(0);
if (iframe){ // iFrame exists
    console.log(iframe.contentWindow); // Prints "null"
    var doc = iframe.contentWindow.document; // NullpointerException
}

So I thought: "Maybe the iframe isn't ready yet?" So I tried:

iframe_jquery.ready(function(){
    var iframe = iframe_jquery.get(0);
    console.log(iframe.contentWindow); // Prints "null"
    var doc = iframe.contentWindow.document; // NullpointerException
});

Same result.

What's wrong?

Your code works fine [here](http://jsfiddle.net/5vY9N/1/). What is "container" in your code? — Pointy, Aug 30 '12 at 15:02
You'll need to make sure that `container` is already part of the live DOM, if it's another dynamically created element that hasn't been placed in the doc yet you'll get this problem. — Pebbl, Aug 30 '12 at 15:08

score 46 · Accepted Answer · edited Oct 21 '21 at 15:32

46

I had this problem last week while playing with iframes (building an rtf editor), and yeah it's not ready yet.

I thought if I put it in a .ready(), it would work, but .ready() is when the DOM is ready, not when the iframe has loaded its contents, so I ended up wrapping my code with jQuery .load().

So try this:

$(function () {  
    $("#myiframe").load(function () {                        
        frames["myframe"].document.body.innerHTML = htmlValue;
    });
});

Hope this helps

edited Oct 21 '21 at 15:32

Steve

10,435
15
21

answered Aug 30 '12 at 15:03

Losbear

3,255
1
32
28

Interestingly, I put a button in the loaded frame, that triggered the same 'iframe.contentWindow', but it is null too. So iframe.contentWindow does not work at all. am I right? ( I KNOW iframe is not null) – Makan Dec 06 '14 at 11:27
2

load event absolutely should work... but doesn't work in Chrome/webkit sometimes :( – NoBugs Jan 13 '15 at 00:13
but for me, .ready() works, .load() fails – Dee Jun 03 '21 at 09:02

score 26 · Answer 2 · answered Aug 30 '12 at 15:10

26

The problem is that your <iframe> won't be "real" until it's really added to the actual DOM for the page. Here is a fiddle to demonstrate..

answered Aug 30 '12 at 15:10

Pointy

405,095
59
585
614

2

Seems i can't understand: i can see the iframe, how that iframe is not added to the actual DOM? – Nov 13 '16 at 13:26
1

@Igor you should ask a new question; I have no idea what your code looks like. – Pointy Nov 13 '16 at 13:43

score 7 · Answer 3 · answered Aug 30 '12 at 15:03

7

Depending on the browser, accessing the document or an <iframe> may vary.

Here is an example of how to handle it:

if (iframe.contentDocument) // FF Chrome
  doc = iframe.contentDocument;
else if ( iframe.contentWindow ) // IE
  doc = iframe.contentWindow.document;

answered Aug 30 '12 at 15:03

Gabe

49,577
28
142
181

6

The `contentWindow` property is available pretty much everywhere, I think. It's `contentDocument` that old versions of IE lacked. – Pointy Aug 30 '12 at 15:06
Nope, that's not it. I only test on iPhone's default browser and in a different part of the app the code I posted works. – Timo Ernst Aug 31 '12 at 08:00

score 3 · Answer 4 · answered Dec 24 '16 at 12:37

3

You can also make a function that will be executed when the iframe has finished loading by setting it's onload attribute.

answered Dec 24 '16 at 12:37

Vladivarius

498
1
3
14

The accepted answer here uses the "load" event (which the "onload" attribute would simply wire into). It seems like this is the accepted answer, plus two extra characters. – HoldOffHunger Aug 22 '18 at 20:06

score 2 · Answer 5 · answered Aug 30 '12 at 15:53

Bookmarklet version

Just out of curiosity I thought I'd put this together. Remembering that iframes and load events don't play well together on different browsers (mainly older, falling apart, should-be-dead browsers)... plus not being entirely sure how jQuery gets around this problem... my brain decided that this would be better supported (whether it is or not is neither here nor there):

$(function(){
  /// bind a listener for the bespoke iframeload event
  $(window).bind('iframeload', function(){
    /// access the contents of the iframe using jQuery notation
    iframe.show().contents().find('body').html('hello');
  });
  /// create your iframe
  var iframe = $('<iframe />')
        /// by forcing our iframe to evaluate javascript in the path, we know when it's ready
        .attr('src', 'javascript:(function(){try{p=window.parent;p.jQuery(p).trigger(\'iframeload\');}catch(ee){};})();')
        /// insert the iframe into the live DOM
        .appendTo('body');
});

The reason for taking this approach is that it is normally far better to trigger your load event from inside the iframe itself. But this means having a proper document loaded in to the iframe, so for dynamic iframes this is a little tedious. This is kind of a mixture between having a document loaded, and not.

The above works on everything I have tested so far - and yes you are correct - it is a little ridiculous, non-future-proof and propably other things that have negative connotations ;)

One positive thing I'll say about this post is that introduces the use of .contents() to access the document of the iframe, which is at least a little bit useful...

score 0 · Answer 6 · answered Aug 17 '23 at 08:37

0

It's worth pointing out that the attribute is only available if the iframe has the same origin as your code; otherwise it's null due to the browser's security policy.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument

answered Aug 17 '23 at 08:37

ehrencrona

6,102
1
18
24

Why is iframe.contentWindow == null?

6 Answers6

Bookmarklet version

Linked