IE11中通过父容器调用insertBefore修改弹窗DOM时触发无效参数错误

你碰到的是IE11特有的跨窗口DOM操作兼容性限制——当从父窗口尝试将自身文档创建的DOM节点插入到子弹窗的DOM树中时，IE的文档隔离机制会直接抛出「无效参数」错误，而Chrome等现代浏览器支持跨文档节点迁移，所以不会出现这个问题。

问题根源 #

IE11严格隔离了不同窗口的document对象，不允许将来自A文档的DOM节点插入到B文档的DOM结构里，而你之前的代码中，heading节点是在父窗口的document下创建的，尝试插入到弹窗的容器中就触发了这个限制。

解决方案：在目标文档上下文创建DOM节点 #

要解决这个问题，核心是确保要插入的节点是由弹窗自身的document创建的，而不是父窗口的document。下面提供两种可行的修改方案：

方案1：调整父窗口函数，使用目标容器的ownerDocument创建节点

修改popupcontainer.html中的changeDomContent函数，利用目标容器所属的文档来创建节点：

<!-- popupcontainer.html 修改后的script部分 -->
<script>
function changeDomContent(container, contentText) {
    // 使用弹窗文档创建节点，避免跨文档冲突
    var heading = container.ownerDocument.createElement('h2');
    heading.textContent = contentText;
    container.insertBefore(heading, container.firstChild);
}

function openPopup() {
    window.open("popup.html", "_blank", "location=no,scrollbars=yes,resizable=yes,height=500px,width=800px");
}
</script>

然后修改popup.html中的fnInit函数，传递内容文本：

<!-- popup.html 修改后的script部分 -->
<script>
function fnInit() {
    var winObj = window.opener;
    winObj.changeDomContent(document.getElementById('appContainer'), "Content from parent container");
}
</script>

方案2：完全在弹窗内部创建节点，父窗口仅提供数据

如果希望逻辑更清晰，也可以把DOM节点创建的逻辑放到弹窗中，父窗口只负责提供需要的内容：

修改popupcontainer.html新增一个获取内容的函数：

<script>
function getPopupContent() {
    return "Content from parent container";
}

function openPopup() {
    window.open("popup.html", "_blank", "location=no,scrollbars=yes,resizable=yes,height=500px,width=800px");
}
</script>

然后修改popup.html的fnInit函数：

<script>
function fnInit() {
    var winObj = window.opener;
    var container = document.getElementById('appContainer');
    // 用弹窗自己的document创建节点
    var heading = document.createElement('h2');
    heading.textContent = winObj.getPopupContent();
    container.insertBefore(heading, container.firstChild);
}
</script>

为什么这个方案适配Knockout #

这两种方案都是通过原生DOM操作插入合法的节点，不会像innerHTML/outerHTML那样重新解析DOM结构，因此不会破坏Knockout已经绑定的事件和ViewModel关联，完全符合项目框架的要求。

内容的提问来源于stack exchange，提问作者Deeps