wrschneider
wrschneider

Reputation: 18770

dynamic IFRAME has undefined body in IE11

This works in Chrome but fails in IE11. The end goal is to construct a new empty IFRAME, with a form in it, then to submit that form to display actual content.

The new constructed IFRAME has no body, so document.body.appendChild fails with error "Unable to get property 'appendChild' of undefined or null reference"

What is the right way to fix this and create an empty/placeholder body?

I think I can fix it with document.write but that feels wrong.

http://jsfiddle.net/mobfrqxn/6/

var placeholder = document.getElementById("placeholder");

var myframe = document.createElement("iframe");
myframe.src = 'javascript:false';
myframe.id = 'myframe';

placeholder.appendChild(myframe);

var newElement = document.createElement("form");

myframe.contentWindow.document.body.appendChild(newElement);

alert("success")

Upvotes: 0

Views: 3035

Answers (2)

wrschneider
wrschneider

Reputation: 18770

Actually, the simplest fix seems to be removing the assignment of myframe.src altogether, since I don't actually want to load anything.

full example that I tested on IE9, IE11 and Chrome:

http://jsfiddle.net/mobfrqxn/13/

Upvotes: 0

mwarren
mwarren

Reputation: 2469

Your iframe hasn't had enough time to load so it's empty. Put appending the form into an onload function on the frame.

I've also put the whole lot into a window.onload to be sure that the main doc has time to load. This works in Internet Explorer.

window.onload = function(){

    var placeholder = document.getElementById("placeholder");
    console.log('placeholder ' + placeholder);
    var myframe = document.createElement("iframe");
    myframe.src = 'javascript:false';
    myframe.id = 'myframe';

    myframe.onload = function(){
        var newElement = document.createElement("form");
        myframe.contentWindow.document.body.appendChild(newElement);
        alert("success");
    };

    placeholder.appendChild(myframe);

};

Upvotes: 2

Related Questions