本文给大家讲述的是使用 javascript 实现文档加载完成后再执行代码的方法和示例,非常简单实用,有需要的小伙伴可以参考下。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在执行某些操作的时候,需要当文档完全加载完成之后再去执行,否则可能出现意向不到的情况,先看一段代码实例:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=" utf-8">
- <title>
- phperz
- </title>
- <style type="text/CSS">
- div{ width:200px; height:200px; }
- </style>
- <script type="text/javascript">
- document.getElementById("mytest").style.backgroundColor = "#639";
- </script>
- </head>
- <body>
- <div id="mytest">
- </div>
- </body>
- </html>
以上代码的初衷是将 div 的背景颜色设置为 #639,但是并未达到我们预期的效果,这是因为文档加载的时候代码是顺序执行的,当执行 js 的设置背景颜色代码的时候,还没有加载到指定的 div,所以 js 语句根本没有获取到对象。代码修改如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=" utf-8">
- <title>
- phperz
- </title>
- <style type="text/css">
- div{ width:200px; height:200px; }
- </style>
- <script type="text/javascript">
- window.onload = function() {
- document.getElementById("mytest").style.backgroundColor = "#639";
- }
- </script>
- </head>
- <body>
- <div id="mytest">
- </div>
- </body>
- </html>
以上代码实现了预期的效果,这是因为将代码放到了一个函数中,而此函数用作了 window.onload 事件的事件处理函数。window.onload 事件触发的条件是当前文档完全加载完成,当此事件被触发之后,就会执行它的事件处理函数,这样因为所有文档都已加载了,就不存在 js 语句无法获得对象的情况了。
来源: http://www.phperz.com/article/17/0217/270469.html