appendChild 不能在 IE 中使用 window.open
Posted
技术标签:
【中文标题】appendChild 不能在 IE 中使用 window.open【英文标题】：appendChild not working with window.open in IE 【发布时间】：2013-06-05 17:49:46 【问题描述】：我有一个带有 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是在Quirks模式下运行的，不支持svg。
@Teemu 它正在以 IE9 标准模式运行...
是的，您的主页是，但是您打开的 window 更有可能在 Quirks 模式下运行，因为它没有 doctype 声明...只需打开一个真实的记录在里面。
@Teemu 上面的代码也不适用于其他 html 元素.. :( 我尝试使用仅包含文本的 html div 打开新窗口。即使这样也行不通..我得到一个空白页。
奇怪，IE 抛出 SCRIPT5022 错误 (Exception thrown and not caught)。但是这段代码与try..catch无关？！将真实页面加载到新打开的窗口也不会消除此错误。设置w.document.body.innerHTML = '...' 似乎有效。在try..catch 中包含appendChild() 时，错误消息为HierarchyRequestError，这意味着“无法在请求的位置插入节点”。这闻起来是 IE 中的一个大错误......
【参考方案1】：
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 Exception: HIERARCHY_REQUEST_ERR (3) 还有这个错误的地方（请输入句子或部分代码） 谢谢大家！在我要附加的相同上下文中创建节点以解决问题:)【参考方案2】：在处理了同样的问题之后，这是我的 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);
【讨论】：
以上是关于appendChild 不能在 IE 中使用 window.open的主要内容，如果未能解决你的问题，请参考以下文章
document.head.appendChild(element) 即 ie7 和 ie8
document.head.appendChild(element) 在 IE8 及以下报错
javascript中document.appendChild和document.body.appendChild的问题