个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 16:54:25 26 4
gpt4 key购买 nike

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

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

最佳答案

您的第一个链接的加载设置为“无换行 - <head> 的底部”。

enter image description here

这相当于 HTML 之类的

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

您的第二个链接的加载设置为“加载时”:

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

关于javascript - 令人难以置信的是，相同的 Javascript 代码在 JSFiddle 中的行为方式并不相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59478300/

26 4 0
文章推荐： html - 使 bootstrap div 响应
文章推荐： javascript - 如何使用 javascript/jquery 按数组顺序更改网站背景？
文章推荐： javascript - 当存在后代类时将类添加到父类
文章推荐： Python:在没有 setlocale() 的情况下访问 Posix 的语言环境数据库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com