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

Question

我在两个 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/

为什么他们的行为方式不同？

Answer 1

您的第一个 link 具有负载设置 "No wrap - bottom of <head>"。

这相当于HTML喜欢

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

您的第二个 link 具有负载设置 "On Load":

这相当于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');
  };
};

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

Unbeleivable, same Javascript code do not behave the same way in JSFiddle

javascript

jsfiddle