烟台网站建设 > 技术/新闻 > 网站建设 > > 烟台网站建设onload事件运行顺序

烟台网站建设onload事件运行顺序

Mar 06 , 21:03:45烟台网站建设 www.ytwzjs.com

    接着以上M范例的程序代码来更进一步探讨程序代码的运行顺序。这次讨论的问题是:浏览器分析标签及。nload事件之间的运行顺序。
StepOl:这份范例程序代码的内容,和上一个范例的内容可说是大同小异。不同之处是在文件的body标签中加入了p标签来显示文字,并且在body标签中加入T JL个script标签来验证运行顺序。

StepO2:接着,运行这个范例观看结果,一样可以看到网页显示第一个信息"this is Embedded Script 001 ".但此处先不要按下“确定,,按钮,将目光移到浏览器窗口上,可以发现整个窗口是一片空白。先记下这个观察到的结果,然后按下对话框中的“确定”按钮。
StepO3:按下“确定”按钮后,浏览器会显示第二个信息"this is Embedded Script 002"。这时浏览器窗口依然是一片空白.StepO4:再度按下“确定”按钮后,浏览器会显示第三个信息‘`this is Embedded Script 003 "。同样地先不要按下“确定”,将目光移到浏览器窗,这I讨会发现浏览器窗口上显示了“this is HTML Contents"。

StepO5:最后再按下对话框中的“确定”按钮,才会显示第四个由onload事件引发的信息"this is window.onload"·
StepO6:由范例运行的结果来分析,可以理解浏览器是依照文件里标签出现的顺序,来分析与运行侮个HTML标签,并且在分析、运行完文件内的所有标签之后,才引发。nload事件。
StepO7:当然使用相同的思考模式来验证外部程序代码的运行顺序,也会是相同结染。
    另外在script标签中,也提供了用来控制运行先后顺序的属性:defer属性。这个defer属性只会作用在采用外部程序代码模式的script标签上,浏览器会忽略设置在内嵌程序代码模式的script标签上的defer属性。当script标签设置了defer属性,浏览器分析到这个script标签之后,不会依照标签顺序来运行这个标签内的程序代码,而是在分析运行整份文件之后才去运行。由上面的范例,可以验证defer属性控制运行先后顷序的结果。
.首先这个范例采用了外部程序代码模式的script标签,来引用外部的javaScript程序代码。并且在这个script标签上设置了defer属性,用来延迟运行外部程序代码的内容。
.运行这个范例的结果,可以看到浏览器是在显示了网页内容之后,才运行外部程序代码内容来显示对话框。
.而如果将范例中的defer属性删除,就会采用默认的运行模式:依照文件里标签出现的顺序,先运行外部程序代码,再显示网页内容。

ABOUT US

烟台景明网络科技有限公司是中国网络技术服务新生代的杰出代表。
烟台大学毕业生创办于2006年,前身为阿里巴巴及百度烟台地区服务商。
技术团队由顶级网络工程师与行业知名设计师组成,立足烟台,服务全国。

Contact information

手机:18253532326
Q Q:1211515810

网址:www.ytwzjs.com
地址:烟台市大学生创业园(高新区航天路101号)

申请友链QQ:1211515810
  • 友情链接
  • 合作伙伴
烟台网站建设的logo

鲁ICP备14032136号

声 明: 本站图文素材部分来源于网络。互联环境贵在共享,版权归原作者所有,不代表本站附和其观念及不承担真实性责任。如涉及版权等问题,请及时与我们联络。