HTML加载JavaScript的方法

最新推荐文章于 2023-08-11 16:40:22 发布

RoyChen3

最新推荐文章于 2023-08-11 16:40:22 发布

阅读量802

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML_JavaScript_CSS 文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/LIONOEL/article/details/75500865

HTML_JavaScript_CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JavaScript在网页中的加载及执行机制，包括如何利用window.onload处理页面加载完成后的初始化脚本，以及解决脚本调用时可能出现的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加载JavaScript的方法

加载JS脚本语句

<script src=""></script>

<script>
    JavaScript codes
</script>

JS加载语句如果放在head区域，JS脚本会比网页body区域内容先加载，因为HTML内容加载是从上往下。

<head>
    <script src="1.js"></script>
    <script src="2.js"></script>
</head>

上面的例子，1.js先于2.js加载到网页中。
由于HTML的从上到下的加载机制，我们会遇到脚本调用问题。
问题：如果我们想要在网页刚加载时调用脚本去处理网页中的元素，因为脚本是通过DOM(Document Object Model)对HTML元素，但是在HTML中脚本放在元素前面，元素还没生成加入到DOM中，脚本无法对该元素操作。
方法：我们把JS脚本按调用顺序分成两种，一种是网页刚加载后就调用的脚本(初始化脚本)，另一种是根据用户操作而调用的脚本(用户脚本)。
用户脚本可以放在任何区域，因为用户操作一般都是在网页加载完成后进行的。但是为了便于脚本管理和提高用户体验，我们一般将其放在head区域预先加载脚本，让浏览器预先解释脚本。
初始化脚本

<!--
将初始化脚本的代码封装成函数，赋值给window.onload,window.onload
指明当window对象加载完后执行指定方法，window对象包含document对象,
所以当window对象加载完后,DOM便建立.
-->
window.onload=function(){
    codes
}

<!--
先在head区域加载初始化脚本，将初始化函数赋值给body元素的onload
属性
-->
<head>
    <script>
        function init(){
            lines of codes
        }
    </script>
</head>
<body onload="init">
</body>