尝试更改弹出窗口的DOM时,insertBefore在Internet Explorer 11中抛出错误

时间:2018-05-12 11:46:16

标签: javascript dom internet-explorer-11

问题发生在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中运行良好。任何建议都会有帮助。谢谢!

0 个答案:

没有答案