ria
ria

Reputation: 7974

appendChild not working with window.open in IE

I have a page with an svg tag. The page has a button called "Preview" which on clicking should open a new window with the image (svg).

Below is a piece of code which works in Chrome/Firefox but not in IE (I'm using IE 9- IE9 standards mode)

var w = window.open();
var svg = $('#chart');              
var svgPrint = svg.cloneNode(true);
svgPrint.setAttribute('xmlns','http://www.w3.org/2000/svg');
w.document.body.appendChild(svgPrint);

Any suggestions would be highly appreciated.

Thanks.

Upvotes: 11

Views: 10928

Answers (2)

Mirko Cianfarani
Mirko Cianfarani

Reputation: 2103

IE will block appending any element created in a different window context from the window context that the element is being appending to.

var childWindow = window.open('somepage.html');

//will throw the exception in IE
childWindow.document.body.appendChild(document.createElement('div'));

//will not throw exception in IE
childWindow.document.body.appendChild(childWindow.document.createElement('div'));

Upvotes: 14

Robert Waddell
Robert Waddell

Reputation: 854

After dealing with the same issue, this is an excerpt of the solution that worked in my case for IE, avoiding the SCRIPT5022 error. Thanks to help from this post.

var myWindow = window.open('about:blank', 'loading...', '');
var myWindowDoc = myWindow.document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
var myWindowBody = myWindow.document.createElementNS('http://www.w3.org/1999/xhtml', 'body');

myWindow.document.open().write('<html><head></head><body><div id="targetDiv"></div></body></html>');
myWindow.document.close();

try {
    myWindow.document.getElementById('targetDiv').appendChild(HTMLpayload.cloneNode(true)); 
} catch (e){
    if (HTMLpayload.outerHTML) {
        myWindow.document.getElementById('targetDiv').innerHTML = HTMLpayload.outerHTML;
    } else {
        console.log(e);
    }
}

Upvotes: 1

Related Questions