难以置信，相同的Javascript代码在JSFiddle中的行为不同

问题描述 投票：0回答：1

我在两个JSFiddle中编写了相同的代码，但是它们的行为方式不同：

HTML：

<p id='complete'></p>

JS：

document.onreadystatechange=fnStartInit; 
function fnStartInit() 
{
  var state = document.readyState
  if (document.readyState === 'complete') 
  {
      document.getElementById('complete').innerHTML = 'Document completely loaded'
  }
}

正在工作的JSFiddle： https://jsfiddle.net/Imabot/toujsz7n/9/

非工作JSFiddle： https://jsfiddle.net/Imabot/3sLcpa0y/7/

为什么它们的行为方式不一样？

javascript jsfiddle
1个回答
3
投票

您的第一个链接的负载设置为“无环绕-<head>的底部”。

enter image description here

这等同于具有类似HTML的功能

<head>
<script>
// YOUR SCRIPT HERE
</script>
<head>
<body>
// YOUR HTML HERE
</body>

您的第二个链接的负载设置为“ On Load”：

enter image description here

这等同于具有类似HTML的功能

<head>
<script>
window.onload = function() {
// YOUR SCRIPT HERE
}
</script>
<head>
<body>
// YOUR HTML HERE
</body>

如果您检查右下角的iframe，可以看到此内容。因此，当第二个脚本运行时，readystatechange再也不会触发，因此fnStartInit也永远不会运行。

这是一个演示相同问题的代码段：

window.onload = () => {
  console.log('onload');
  document.onreadystatechange = () => {
    console.log('ready state just changed');
  };
};
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.