在IE中,使用window.open时appendChild无法正常工作。

11

我有一个包含svg标签的页面。页面上有一个名为“预览”的按钮,点击后应该打开一个新窗口显示图像(svg)。

下面是一段代码,在Chrome / Firefox中起作用,但在IE中不起作用(我使用的是IE 9- IE9标准模式)

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);
任何建议都将不胜感激。
谢谢。

我猜测about:blank在怪异模式下运行,不支持svg - Teemu
@Teemu 它正在运行于IE9标准模式... - ria
是的,你的主页是的,但是你打开的window更有可能以怪异模式运行,因为它没有doctype声明...只需通过在其中打开一个真实文档来进行测试。 - Teemu
@Teemu 上述代码对于其他HTML元素也不起作用。:( 我尝试使用仅包含文本的HTML div打开新窗口。即使这样也不起作用..我得到一个空白页面。 - ria
奇怪的是,IE 抛出 SCRIPT5022 错误(“异常被抛出但未被捕获”)。但这段代码与 try..catch 没有任何关系?!同时,在新打开的窗口中加载真实页面也无法消除此错误。设置 w.document.body.innerHTML = '...' 似乎可以解决问题。当将 appendChild() 包含在 try..catch 中时,错误消息是 HierarchyRequestError,这意味着“节点无法插入到请求的位置”。这在 IE 中似乎是一个大 bug... - Teemu
@ria请看一下我的回答吧... - Mirko Cianfarani
2个回答

14

IE将阻止在不同的窗口上下文中创建的任何元素追加到正在追加的元素所在的窗口上下文中。

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

我尝试了这个...但是我得到了这个错误:DOM异常:HIERARCHY_REQUEST_ERR(3) - ria
还有您在哪里出现了这个错误(请提供句子或代码的部分) - Mirko Cianfarani
5
谢谢!在相同的上下文中创建节点并将其添加解决了问题 :) - franDayz

1

在处理相同问题后,这是我在IE中使用的解决方案摘录,避免SCRIPT5022错误。感谢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);
    }
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接