如何解决除非 onload="init() 在 body 标签内,否则 HTML5 JavaScript Animation 不会播放为什么?
阅读另一篇文章后,我仍然对onload感到困惑。 Setting body onload without using the <body> tag
在三种浏览器(edge、firefox 和 chrome)中成功测试来自 Adobe Animate 2021 的动画后,我计划将其添加到我的 Dreamweaver 2021 项目中。我注意到“adobe-animation.html”中的标签在第一个 body 标签下方有动画画布。
<head>
<script>
....
</script>
</head>
<body onload="init();" style="margin:0px;"> //start of animation tags
.....
</body>
更改标签并将其添加到我的项目后,动画没有播放。
我回到“adobe-animation.html”,只将 body 标记更改为 div 并将其嵌套在新的 body 中。
<body>
<div onload="init();" style="margin:0px;"> //originally <body>
....
</div> //originally </body>
</body>
它没有像我预期的那样奏效。
经过进一步测试。我注意到 onload="init() 需要在 body 标签内。什么是 onload="init()?为什么它需要在第一个 body 标签内?
解决方法
使用addEventListener
没有足够的信息说明为什么不调用它,但是直接分配事件是不好的做法,因为它们很容易被您或某些 3rd 方脚本覆盖,因此不能保证会调用侦听器。
你永远不应该使用
<sometag onsomeevent = "doSomething()"/>
始终使用 EventTarget.addEventListener
分配事件侦听器在这种情况下最好使用的 eventTarget 是 window AKA globalThis。
因此您可以使用
调用init
<script>
// guarantee init is called
addEventListener("load",init(),{once: true}); // same as window.addEventListener but window
// is the default object an thus not required
function init() { /*code*/ }
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。