appendChild not working with window.open in IE

Question

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.

I suppose `about:blank` is run in Quirks mode, which doesn't support `svg`. — Teemu, Jun 10 '13 at 06:07
Yes, your main page is, but the `window` you open is more likely to run in Quirks mode, since it doesn't have a doctype declaration... Just test it by opening a real document in it. — Teemu, Jun 10 '13 at 06:14
@Teemu The above code doesn't work for other html elements also.. :( I tried opening new window with a html div which contains just a Text. Even that doesn't work.. I get a blank page. — ria, Jun 10 '13 at 08:19
Weird, IE throws SCRIPT5022 error (`Exception thrown and not caught`). But this code has nothing to do with `try..catch` ?! Also loading a real page to a newly opened window doesn't remove this error. Setting `w.document.body.innerHTML = '...'` seems to work. When enclosing `appendChild()` within `try..catch`, the error message is `HierarchyRequestError`, which means, that "The node cannot be inserted at the requested location." This smells a big bug in IE... — Teemu, Jun 10 '13 at 09:29

score 14 · Answer 1 · edited Jun 14 '16 at 11:28

14

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'));

edited Jun 14 '16 at 11:28

Agustin Cautin

411
5
23

answered Jun 10 '13 at 07:00

Mirko Cianfarani

2,023
1
23
39

I tried this.. but I'm getting this error: DOM Exception: HIERARCHY_REQUEST_ERR (3) – ria Jun 10 '13 at 16:21
Also where you have this error (sentence or part of code please) – Mirko Cianfarani Jun 10 '13 at 16:40
5

Thanks guys! Creating the nodes in the same context I'm appending to solved the problem :) – franDayz Jul 22 '14 at 12:55

score 1 · Answer 2 · edited May 23 '17 at 11:51

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);
    }
}

appendChild not working with window.open in IE

2 Answers2

Linked