关于window.onload

来源：互联网发布：江苏省网络作家协会编辑：程序博客网时间：2024/06/07 16:16

导语：网页中的JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能会导致无法获取对象的情况，为了避免这种情况的发生，我们有以下两种解决办法：

1.将脚本代码放在网页的最底端，这样就能确保操作的对象已经加载完成。像这样：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div id="parent">        <p id="child">点击此处有彩蛋</p>    </div>    <script>        var child=document.getElementById('child');        alert(child.innerHTML);    </script></body></html>

将JavaScript的代码放在所有内容的最后面，或者放在</body>的外面，或者放在<html> 的外面，都是可以执行到的，因为保证了将上面的所有对象加载完，那么执行JS代码可以获取到啦…

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        var child=document.getElementById('child');        alert(child.innerHTML);    </script></head><body>    <div id="parent">        <p id="child">点击此处有彩蛋</p>    </div></body></html>

加载整个文档的时候，加载到js脚本代码了，由于后面的内容还没有加载进来，所以获取不到id为child的元素，所以什么都不会执行…

2.通过window.onload来执行脚本代码。window.onload是一个事件，当文档加载完成后会触发该事件，可以为此事件注册事件处理函数，将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。像这样：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        window.onload=function () {            var child=document.getElementById('child');            alert(child.innerHTML);        }    </script></head><body>    <div id="parent">        <p id="child">点击此处有彩蛋</p>    </div></body></html>

以上代码就是为window.onload事件绑定事件处理函数，这里绑定的是一个匿名函数，当然也可以绑定非匿名函数，加上函数名即可。
注意：不能为window.onload事件绑定多个事件处理函数，否则，最后一个会覆盖掉前面所有的函数。如下代码：

window.onload=function a(){}window.onload=function b(){}

可做如下变通：

window.onload=function(){    function a(){}    function b(){}}

阅读全文

1 0