Question

我正在阅读学习PHP，MySQL和... JavaScript的使用jQuery，CSS＆amp; Robin Nixon的HTML5第4版。

我正在做一个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，但我不认为它们是导致任何问题的原因。我将在下面发布。还将它们直接添加到代码段中，以便代码在此处运行。它们不在我的实际代码中。

    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) }

Answer 1

浏览器以不同方式处理样式的呈现。 TLDR是Chrome还没有呈现该元素，但它已将其添加到DOM中。有很多关于渲染周期如何工作的好文章，但由于这是从初学者的角度出发的，所以我会留下血腥的细节。

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

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

要继续播放，请在此页面上打开Chrome的开发者控制台并运行该代码段。如果你不想，会有截图。

您现在可以在dom中查看甚至与NewDom元素进行交互，但还没有以某种方式绘制。

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

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

你现在应该看到这样的事情：

你赢得看到的内容同样重要：dom节点没有文字，也没有边框。即使您向页面添加了一个类，该类中的样式也不会呈现。

然后我在脚本中添加了一个步骤，我们重新添加了Element，alert，然后等待10秒。

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

脚本将恢复，它将删除dom节点，并重复添加它，但这次等待10秒。现在向下滚动，观察最初承诺的NewDiv。

＆＃13;

        <!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>

＆＃13;

警报启动时，网页无法加载Chrome

1 个答案: