延迟属性和onload事件

Question

延迟属性和onload事件

5

有以下代码：

<html>
    <head>  

        <script>            
            function elem_onload() {
                console.log("elem_onload");
            };      
        </script>

    </head>

    <body onload="elem_onload()">       
        <script type="text/javascript" src="script.js" defer></script>      
    </body>
</html>

script.js:

console.log("external script");

defer属性似乎不起作用。输出结果如下：

external script
elem_onload

无论是否使用 defer 属性，都应该是：

elem_onload
external script

defer属性是什么？

重复的答案？

我想声明我的回答不是重复的

How exactly does <script defer=“defer”> work?

所引用的推荐答案是关于内联脚本，浏览器行为对我来说是清楚的 - 它简单地忽略了defer。我的问题是关于外部脚本，此时浏览器应该执行延迟的外部脚本

在文档解析后

正如文档所述，因此在onload事件之后。

因此，我正在等待一个适当的答案...

- Mulligan81

1

4.21.1 脚本元素：（https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer）这些属性允许选择三种可能的模式。如果存在 async 属性，则脚本将在可用时立即执行，但不会阻止页面进一步解析。如果未存在 async 属性但存在 defer 属性，则脚本将在页面完成解析后执行。如果两个属性都不存在，则脚本将立即获取并执行，在用户代理继续解析页面之前。 - Andreas

您的建议是，“onload”事件总是在页面解析完成后触发，因此在延迟脚本之后触发？ - Mulligan81

尝试在elem_onload结束时设置<script type=""></script>的type和src。 - guest271314

2

12.2.6 结束：第3步。执行所有延迟脚本；第4步。触发 DOMContentLoaded 事件；... 第7步：触发 load 事件。 - Andreas

2个回答

-2

感谢大家的帮助。

所以原始文档中的语句 "...after the document has been parsed" (MDN <script> tag) 指的是 12.2.6 The end 中的步骤 #0。

当文档完全解析后，现在有几个任务需要完成。这些任务包括运行外部延迟脚本，这是先于 onload 事件的步骤 #3。

我理解得对吗？

- Mulligan81

是的。加载事件在第7步触发。 - Arman Ozak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arman Ozak · Accepted Answer

通过使用defer属性延迟执行的外部脚本会在触发DOMContentLoaded事件之前执行，也就是当初始HTML文档已经完全加载和解析时。另一方面，<body>标签上的onLoad属性仅在网页完全加载时触发。

因此，defer属性确实有效。您可以通过尝试下面的两种情况来测试它。在这两种情况下，script.js文件的内容应该如下：

console.log(document.getElementById('sample').innerHTML);

案例1 HTML - 使用defer --> 记录“示例文本”

<body onLoad="elem_onload()">       
<script type="text/javascript" src="script.js" defer></script>    
<div id="sample">Sample text</div>
</body>

CASE 2 HTML - 不使用defer --> 记录错误

<body onLoad="elem_onload()">       
<script type="text/javascript" src="script.js"></script>    
<div id="sample">Sample text</div>
</body>