警报启动时，网页无法在Chrome中加载 [英] Webpage not loading in chrome while alert is up
问题描述
我目前正在阅读学习PHP，MySQL和带有jQuery，CSS&的JavaScript
HTML5 4th Edition ，由Robin Nixon编写。
我正在做一个JavaScript示例，其中涉及在确认警告对话框之后将元素添加到DOM，然后将其删除
但是，该页面无法在Chrome中正确加载。警报启动时，页面继续加载。说它会添加对象，而警报提示时它将删除该对象，但是直到第二个警报框关闭后，始终没有加载应该一直存在的文本。
添加的元素本身根本不会在Chrome中加载。但是，该页面完全可以在Edge和Firefox中使用。 Chrome是否需要调整设置以允许页面正确加载，或者这仅仅是Chrome当前设计的工作方式？
相关代码如下如下
<！DOCTYPE html> < html> < head> < title>添加元素< / title> < script src ='OSC.js'>< / script> < / head> < body>这是其中仅包含此文本的文档。 < script type = text / javascript> alert（'单击确定以添加元素'）newdiv = document.createElement（'div'）newdiv.id ='NewDiv'document.body.appendChild（newdiv）S（newdiv）.border ='实心1px红色'S（ newdiv）.width ='100px'S（newdiv）.height ='100px'newdiv.innerHTML =我是DOM中插入的新对象 tmp = newdiv.offsetTop警报（'单击确定以删除元素'） pnode = newdiv.parentNode pnode.removeChild（newdiv）tmp = pnode.offsetTop函数O（i）{return typeof i =='object'？ i：document.getElementById（i）}函数S（i）{返回O（i）.style}函数C（i）{返回document.getElementsByClassName（i）}< / script> < / body> < / html>
感谢您的帮助！
编辑：OSC.js文件中有3个函数O，S和C，但我认为它们不是造成任何问题的原因。我将在下面发布它们。还可以将它们直接添加到代码段中，这样代码才能在此处工作。它们不在我的实际代码中。
函数O（i）{return typeof i =='object'？ i：
document.getElementById（i）}
函数S（i）{返回O（i）.style}
函数C（i）{返回document.getElementsByClassName（ i）}
浏览器以不同的方式处理样式呈现。 TLDR是Chrome尚未呈现该元素，但已将其添加到DOM中。有很多关于渲染周期如何工作的好文章，但是由于这是从初学者的角度出发的，因此我将详细介绍细节。
我做了一个首先，我将您的脚本从OSC.js移到了头部，因此它们的加载方式与脚本正确加载的方式相同。 JavaScript可以
您不会看到的内容同样重要：dom节点没有文本，也没有边界。即使您将一个类添加到页面中，该类的样式也不会呈现。
然后，我在脚本中添加了一个步骤，在其中我们重新添加了Element ，发出警报，然后等待10秒钟。
如果您正在玩很长时间，请立即恢复调试器。
该脚本将继续执行，它将删除dom节点，并重复添加它，但是这次等待10秒钟。现在向下滚动，并按照最初的承诺观察NewDiv。
<！DOCTYPE html> < html> < head> < title>添加元素< / title> < script type = text / javascript>函数O（i）{返回i ==对象的类型？ i：document.getElementById（i）}函数S（i）{返回O（i）.style}函数C（i）{返回document.getElementsByClassName（i）}< / script> < / head> < body>这是其中仅包含此文本的文档。 < script type = text / javascript> alert（'单击确定以添加元素'）newdiv = document.createElement（'div'）newdiv.id ='NewDiv'document.body.appendChild（newdiv）S（newdiv）.border ='实心1px红色'S（ newdiv）.width ='100px'S（newdiv）.height ='100px'newdiv.innerHTML =我是DOM中插入的新对象 tmp = newdiv.offsetTop调试器； alert（'单击确定以删除元素'）pnode = newdiv.parentNode pnode.removeChild（newdiv）tmp = pnode.offsetTop alert（'单击OK以重新添加元素'）document.body.appendChild（newdiv）setTimeout（ （）=> {alert（'单击OK删除元素'）pnode = newdiv.parentNode pnode.removeChild（newdiv）tmp = pnode.offsetTop}，10000）< / script> < / body> < / html>
I'm currently reading Learning PHP, MySQL & JavaScript With jQuery, CSS & HTML5 4th edition by Robin Nixon.
I'm doing a JavaScript example involving adding an element to the DOM after acknowledgement of the alert dialog and then removing it upon another acknowledgement.
However, the page doesn't load properly in Chrome. The page continues to "load" while the alert is up. Saying it will add the object and while the alert is up saying it will remove the object but the text that should be there the whole time is not loaded until after the second alert box is closed.
The added element itself never loads at all in Chrome. Yet, the page works exactly has intended in both Edge and Firefox. Is there a setting in Chrome I need to adjust to allow the page to load properly or is this just how Chrome is currently designed to work?
The code in question is below as follows
<!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>
Thank you for your help!
edit: There are 3 functions O, S, and C in the OSC.js file but I don't think they are the cause of any of the problems. I will post them below. Also added them to the snippet directly just so the code will work here. They are not in my actual code.
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) }
Browsers handle the rendering of styling differently. TLDR is that Chrome hasn't rendered the element yet, but it has added it to the DOM. There are lots of good articles about how the render cycle works, but since this is coming from a beginners perspective, I'll leave the gory details out.
I did a couple of things, first, I moved your scripts from OSC.js into the head, so they'd be loaded the same as if the script had loaded correctly. JavaScript can hoist functions so this was probably just maintanence and explains why the code worked else where.
After that I added a debugger right before the second alert so that we could interact with the page before the alert fired.
To play along, open Chrome's developer console on this page and run the snippet. There will be screenshots if you don't want to.
You can now see and even interact with the NewDom element, in the dom, but not yet painted in a few ways.
First, just log it out: console.log(newdiv), or document.querySelector('#NewDiv').
In your console you'll see the node, right click on it and "Scroll into view", then right click on it again and "Reveal in elements panel".
You should now see something like this:
What you won't see is equally important: the dom node has no text, nor border. Even if you add a class to the page, the styles from that class will not have rendered.
Then I added a step to the script where we re-add the Element, alert, and then wait for 10 seconds.
If you're playing a long, resume your debugger now.
The script will resume, it will remove the dom node, and repeat adding it, but this time wait 10 seconds. Scroll down now, and observe the NewDiv as originally promised.
<!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中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
