在我单击“停止加载此页面”之后，Chrome才会触发onload事件
[英]onload event doesn't trigger in chrome until after I click “stop loading this page”
问题描述
I have an HMTL page with a select control that lists all the months. 
我有一个带有选择控件的HMTL页面，该控件列出了所有月份。 I have added a function to set the default to the current month. 我添加了将默认值设置为当前月份的功能。 The function is triggered by onload event on the tag. 该功能由标签上的onload事件触发。
I have loaded this page on apache web server installed with XAMPP. 我已将此页面加载到XAMPP所安装的apache Web服务器上。 When I load the page with FireFox or Microsoft Edge it works as expected. 当我用FireFox或Microsoft Edge加载页面时，它可以按预期工作。 When I load it with Chrome it does not. 当我使用Chrome加载时，它不会加载。 onload event on chrome doesn't get triggered unless I click on "Stop loading this page". 除非我单击“停止加载此页面”，否则不会触发chrome上的onload事件。 What am I doing wrong? 我究竟做错了什么？
Page seems to continue trying to load. 页面似乎继续尝试加载。 It never stops unless I click the stop page. 除非单击停止页面，否则它永远不会停止。
Per the suggestion of Vu Huu Cuong I tried it with chrome incongito mode and it works as expected. 根据Vu Huu Cuong的建议，我以chrome incongito模式尝试了它，并且按预期工作。 Why wouldn't it work with normal mode?! 为什么在正常模式下不起作用？
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function populateSelects(){
var today = new Date();
var m = today.getMonth();
document.getElementById('s_month').getElementsByTagName('option')[m].selected = 'selected';
}
</script>
<title>Page Title</title>
</head>
<body onload="populateSelects()">
<div >
<select id='s_month' name='s_month' >
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="septemeber">Septemeber</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
</div>
</body>
</html>
2 个解决方案
解决方案1
1 2018-06-10 17:48:23
I cannot help you with getting this method to work, but what you could do is have the listener in a script tag, instead of in the html. 我无法帮助您使用此方法，但是您可以做的是将侦听器放在script标记中，而不是在html中。 Like this document.addEventListener("DOMContentLoaded", function(event) { populateSelects(); }); 像此document.addEventListener("DOMContentLoaded", function(event) { populateSelects(); });一样document.addEventListener("DOMContentLoaded", function(event) { populateSelects(); });
解决方案2
0 2018-06-10 17:46:33
Your code seems to be working fine on chrome. 您的代码在chrome上似乎工作正常。 But if the problem persists it's probably because the event has already happened before the JavaScript has been parsed or the listener has been added. 但是，如果问题仍然存在，可能是因为该事件已经在解析JavaScript或添加侦听器之前发生。 In which case you should check if the document has already been loaded before adding the listener. 在这种情况下，应在添加侦听器之前检查文档是否已加载。
if (document.readyState === "complete") populateSelects();
else window.addEventListener("load", populateSelects);
Furthermore you could also use the DOMContentLoaded event which is triggered when the document has been parsed rather than loaded which is what load does. 此外，您还可以使用DOMContentLoaded当文档被解析，而不是装是什么这是引发事件load一样。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.