Question

为什么下面的代码在Internet Explorer 11中抛出“未指定的错误”（在appendChild行上），我点击了按钮？

<!DOCTYPE html>
<html>
<head>
    <script>
        function go() {
          var popUp = window.open('about:blank');
          popUp.document.body.appendChild(document.createElement('div'));
        }
    </script>
</head>
<body>
  <button onclick="go()">Click Me</button>
</body>
</html>

Answer 1

您正在使用当前页面的文档来创建div，尝试使用弹出窗口中的文档

popUp.document.body.appendChild(popUp.document.createElement('div'));

Answer 2

如果在处理用户事件（如点击）期间使用弹出窗口阻止程序通常只允许window.open。如果弹出窗口被阻止，那可能会导致问题。

您需要从用户发起的事件中调用window.open，例如点击链接，该链接需要target="_blank"。否则，Chrome和Firefox将阻止弹出窗口。

此外，错误被触发，因为在尝试将div附加到popUp之前未检查null。如果没有弹出窗口，则无法向其追加元素。

（我忘记了这一点，Musa让我记住，所以谢谢）IE将阻止在元素正在追加的窗口上下文中追加在不同窗口上下文中创建的任何元素。因此，您需要使用popUp的上下文创建DIV节点，而不是使用当前文档创建DIV节点。

总结一下，这就是代码的外观。

<!DOCTYPE html>
<html>
<head>
        <script>
        function go() 
        {
            var popUp = window.open('about:blank');
            try 
            {
                // Make sure you have a body document when creating the new window....
                popUp.document.write("<html><head><title></title></head><body></body>");
                popUp.document.body.appendChild(popUp.document.createElement('div'));
            }
            catch(e)
            { 
                console.log(e);
            }
        }
        </script>
</head>
<body>
  <button onclick="go()">Click Me</button>
</body>
</html>

为什么这会在IE 11中引发异常

2 个答案: