警报启动时网页未在 chrome 中加载答案

【问题标题】：Webpage not loading in chrome while alert is up警报启动时网页未在 chrome 中加载
【发布时间】：2018-08-25 07:36:06
【问题描述】：

我目前正在阅读学习 PHP、MySQL 和 JavaScript 使用 jQuery、CSS 和 HTML5 第 4 版，作者 Robin Nixon。

我正在做一个 JavaScript 示例，涉及在确认警报对话框后向 DOM 添加一个元素，然后在另一个确认后将其删除。

但是，该页面无法在 Chrome 中正确加载。警报启动时，页面继续“加载”。说它会添加对象，当警报响起时说它会删除对象，但应该一直存在的文本直到第二个警报框关闭后才会加载。

添加的元素本身永远不会在 Chrome 中加载。然而，该页面在 Edge 和 Firefox 中都能正常工作。我需要调整 Chrome 中的设置以允许页面正确加载还是这正是 Chrome 当前设计的工作方式？

有问题的代码如下

        <!DOCTYPE html>
        <html>
            <head>
                <title>Adding Elements</title>
                <script src='OSC.js'></script>
            </head>
            <body>
                This is a document with only this text in it.<br><br>

                <script type="text/javascript">
                    alert('Click OK to add an element')

                    newdiv = document.createElement('div')
                    newdiv.id = 'NewDiv'
                    document.body.appendChild(newdiv)

                    S(newdiv).border = 'solid 1px red'
                    S(newdiv).width = '100px'
                    S(newdiv).height = '100px'
                    newdiv.innerHTML = "I'm a new object inserted in the DOM"
                    tmp = newdiv.offsetTop

                    alert('Click OK to remove the element')
                    pnode = newdiv.parentNode
                    pnode.removeChild(newdiv)
                    tmp = pnode.offsetTop

                    function O(i) { return typeof i == 'object' ? i : 
                   document.getElementById(i) }

                   function S(i) { return O(i).style }
                   function C(i) { return document.getElementsByClassName(i) }
                </script> 
            </body>
        </html>

感谢您的帮助！

编辑：OSC.js 文件中有 3 个函数 O、S 和 C，但我认为它们不是任何问题的原因。我将在下面发布它们。还直接将它们添加到 sn-p 中，这样代码就可以在这里工作。它们不在我的实际代码中。

    function O(i) { return typeof i == 'object' ? i : 
    document.getElementById(i) }

    function S(i) { return O(i).style }
    function C(i) { return document.getElementsByClassName(i) }

【问题讨论】：

标签： javascript html google-chrome dom alert

【解决方案1】：

浏览器处理样式的呈现方式不同。 TLDR 是 Chrome 尚未渲染该元素，但已将其添加到 DOM。有很多关于渲染周期如何工作的好文章，但由于这是从初学者的角度出发，我将省略血淋淋的细节。

我做了几件事，首先，我将您的脚本从 OSC.js 移到了头部，因此它们的加载方式与正确加载脚本的方式相同。 JavaScript 可以hoist functions 所以这可能只是维护并解释了为什么代码在其他地方工作。

之后，我在第二个警报之前添加了debugger，以便我们可以在警报触发之前与页面进行交互。

要继续玩，请在此页面上打开 Chrome 的开发者控制台并运行 sn-p。不想截屏会有截图。

您现在可以在 dom 中看到 NewDom 元素，甚至可以与之交互，但还没有以几种方式绘制。

首先，只需将其注销：console.log(newdiv) 或 document.querySelector('#NewDiv')。

在您的控制台中，您将看到该节点，右键单击它并“滚动到视图”，然后再次右键单击它并“在元素面板中显示”。

您现在应该会看到如下内容：

您不会看到的同样重要：dom 节点没有文本，也没有边框。即使您将一个类添加到页面，该类的样式也不会呈现。

然后我在脚本中添加了一个步骤，我们重新添加元素、警报，然后等待 10 秒。

如果您玩的时间很长，请立即恢复您的调试器。

脚本将继续执行，它会删除 dom 节点，然后重复添加它，但这次要等待 10 秒。现在向下滚动，并按照最初的承诺观察 NewDiv。

        <!DOCTYPE html>
        <html>
            <head>
                <title>Adding Elements</title>
                <script type="text/javascript">
                 function O(i) { return typeof i == 'object' ? i : 
                   document.getElementById(i) }

                   function S(i) { return O(i).style }
                   function C(i) { return document.getElementsByClassName(i) }
                </script>
            </head>
            <body>
                This is a document with only this text in it.<br><br>

                <script type="text/javascript">
                    alert('Click OK to add an element')

                    newdiv = document.createElement('div')
                    newdiv.id = 'NewDiv'
                    document.body.appendChild(newdiv)

                    S(newdiv).border = 'solid 1px red'
                    S(newdiv).width = '100px'
                    S(newdiv).height = '100px'
                    newdiv.innerHTML = "I'm a new object inserted in the DOM"
                    tmp = newdiv.offsetTop
                    debugger;
                    alert('Click OK to remove the element')
                    pnode = newdiv.parentNode
                    pnode.removeChild(newdiv)
                    tmp = pnode.offsetTop

                    alert('Click OK to re-add the element')
                    document.body.appendChild(newdiv)

                    setTimeout(() => {
                      alert('Click OK to remove the element')
                      pnode = newdiv.parentNode
                      pnode.removeChild(newdiv)
                      tmp = pnode.offsetTop
                    }, 10000)
                </script> 
            </body>
        </html>

【讨论】：

我在 chrome 和 safari 中都尝试了这段代码，并且在这两个 div 中都完全绘制了。它有文字和边框。