问题发生在Internet Explorer中 - 当我尝试使用父容器中的insertBefore更改弹出窗口中的dom对象的内容时,它会抛出无效的参数错误。下面是我的popupcontainer和popup html。
popucontainer.html -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function changeDomContent(obj) {
var heading = document.createElement('h2');
heading.textContent = "Content from parent container";
obj.insertBefore(heading, obj.firstChild)
}
function openPopup() {
window.open("popup.html", "_blank", "location=no,scrollbars=yes,resizable=yes,height=500px,width=800px");
}
</script>
</head>
<body>
<h1>Parent Container, who will change the dom content of the popup</h1>
<button onclick="openPopup()">Open Popup</button>
</body>
</html>
popup.html -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function fnInit() {
var winObj = window.opener;
winObj.changeDomContent(document.getElementById('appContainer'));
}
</script>
</head>
<body>
<h1>Testing InsertBefore</h1>
<div id="appContainer">
<div></div>
</div>
<button onclick="fnInit()">
Test InsertBefore
</button>
</body>
</html>
请注意,我确实使用了在IE中工作的outerHTML / innerHTML,但这是来自KnockOut JS,如果我们只是使用outerHTML / innerHTML进行更改,基本上一些事件不会被触发,它希望是一个正确插入的节点。 上面的代码在Chrome中运行良好。任何建议都会有帮助。谢谢!