我们知道,当我们将JS代码脚本放到<head></head>标签之间时,这是的js代码加载要先于DOM加载,而我们往往会在JS代码脚本中写一些获取DOM元素的代码,而此时的DOM是不完整的,

所以我们通常的解决方法是将函数放入到window.onload里面去,window.load事件是网页加载完毕时会触发的一个事件，如果将我们的函数与之绑定,我们的函数也会在页面加载完毕之后执行.

如下代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        var aa = document.getElementById("target");

        alert(aa.nodeName);

    </script>

</head>

<body>

  <div id="target"></div>

</body>

</html>

这段代码在浏览器执行时就会报错,aa is null;因为在js获取id=target的div时,该div还没有加载完毕。所以我们需要这样来解决这个问题，代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        window.onload = bb;

        function bb() {

            var aa = document.getElementById("target");

            alert(aa.nodeName);

        }

    </script>

</head>

<body>

  <div id="target"></div>

</body>

</html>

这个时候代码正常输出:DIV;  nodeName默认输出标签名的大写形式;

这似乎已经解决了我们的问题,但是不够perfect，如下代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        window.onload = bb;

        cc();

        function bb() {

            var aa = document.getElementById("target");

            alert(aa.nodeName);

        }

        function cc() {

            var dd = document.getElementById("Div1");

            alert(dd);

        }

    </script>

</head>

<body>

  <div id="target"></div>

  <div id="Div1"></div>

</body>

</html>

这个时候任然会报错:dd id null;错误原因和上面一样；

解决办法有两个:

1、将需要绑定window.onload事件的两个函数写到一个匿名函数里面,在将该匿名函数与window.onload事件绑定,ok,问题解决！

但是这个方法只能解决需要绑定window.onload事件的函数较少的情况,一旦那些函数有很多,这个方法就不是很好！

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        window.onload = ee;

        function bb() {

            var aa = document.getElementById("target");

            alert(aa.nodeName);

        }

        function cc() {

            var dd = document.getElementById("Div1");

            alert(dd.firstChild.nodeValue);

        }

        function ee() {

            bb();

            cc();

        }

    </script>

</head>

<body>

  <div id="target"></div>

  <div id="Div1">asdas</div>

</body>

</html>

2、这是一个弹性最佳的解决方案       不管你打算在页面加载完毕是执行多少个函数,他都能应付自如；代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        addOnLoadEvent(aa);

        addOnLoadEvent(bb);

        function aa() {

          var aa=document.getElementById("ab");

          alert(aa.firstChild.nodeValue);

        }

        function bb() {

            var bb = document.getElementById("abc");

            alert(bb.firstChild.nodeValue);

        }

        //定义一个addOnLoadEvent的函数

        function addOnLoadEvent(func) {

            var oldonload = window.onload;

            if (typeof window.onload != "function") {

                window.onload = func;   //如果window.onload事件没有绑定任何function则正常绑定

            }

            else {

                //如果window.onload事件已经绑定了函数,则在原来的基础上,继续添加新的函数

                window.onload = function () {

                    oldonload();

                    func();

                };

            }

        }

    </script>

</head>

<body>

<div id="ab">1</div>

<div id="abc">2</div>

</body>

</html>

上面的addOnloadEvent()方法解决了我们的问题,但是还不够全面,因为当需要绑定的方法过多时,我们就要写多条addOnLoadEvent(方法)；所以为了减少代码量这里的代码还可以这样改，

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        var onloadlist = [aa,bb];//定义一个数组,数组里面都是需要在页面加载完毕之后才执行的函数引用

        addOnLoadEvent(onloadlist);

        function aa() {

          alert(1);

        }

        function bb() {

            alert(2);

        }

        function addOnLoadEvent(eventlist) {

             //循环遍历数组依次加到队列中

            window.onload = function () {

                for (var i = 0; i < eventlist.length; i++) {

                    eventlist[i]();

                }

            }

        }

    </script>

</head>

<body>

<div id="ab">1</div>

<div id="abc">2</div>

</body>

</html>

这样就一定程度上减少了代码量，还便于管理方法的执行先后顺序。

JavaScript之共享onload的更多相关文章

  1. JavaScript 是如何工作的：JavaScript 的共享传递和按值传递

    摘要: 原始数据类型和引用数据类型的副本作为参数传递给函数. 原文:JavaScript 是如何工作的:JavaScript 的共享传递和按值传递 作者:前端小智 Fundebug经授权转载,版权归原 ...

  2. 【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别

    JavaScript的window.onload()与jQuery 的ready()的区别 做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...

  3. 原生javascript 共享onload事件

    在工作时,我们给一个元素绑定了事件,如果dom还没加载完成,就执行了js代码,就不会绑定成功.常规解决方案就是用: window.onload = EventFunction; 可是如果有两个 事件, ...

  4. javascript的window.onload()方法和jQuery的$(document).ready()的对比

    jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...

  5. JavaScript：window.onload问题

    前几天做一个点击按钮,就实现切换图片效果的小demo时,代码看上去没问题,就是达不到效果.让我百思不得其解. 代码如下: <!DOCTYPE html> <html> < ...

  6. JavaScript向window onload添加加载函数

    有时候我们需要在页面加载事件后完成一些函数操作,对于函数比较多的情况下可以写一个统一的加载函数 .本函数来自于JavaScript DOM 编程艺术: function addLoadEvent(fu ...

  7. 共享onload事件

    在做前端工作中,我们想要设置某个函数prepare,让它在网页加载完毕后执行,会触发一个onload事件,这个事件与windows对象相关联,必须把prepare函数绑定到这个时间上,语法如下:win ...

  8. javascript --- 将共享属性迁移到原型中去

    当我们用一个构造函数创建对象时,其属性就会被添加到this中去.并且被添加到this中的属性实际上不会随着实体发生改变,这时,我们这种做法显得会很没有效率.例如: function her(){ th ...

  9. js共享onload事件

    问题:通过js进行事件绑定,必须在HTML文档加载完成后再执行js脚本,否则可能因DOM不完整导致无法完成预计的效果,但对于不同的需求如何选用最佳的实现方式呢,这里做了整理,可以做参考. 一.对于小型 ...

随机推荐

  1. Activitys, Threads, & Memory Leaks

    Activitys, Threads, & Memory Leaks 在Android编程中,一个公认的难题是在Activity的生命周期如何协调长期运行的任务和避免有可能出现的内存泄漏问题. ...

  2. Linux下对字符串进行MD5加密

    Linux下对字符串进行MD5加密 比如要用MD5在linux下加密字符串“test",可以使用命令:$ echo -n test|md5sum098f6bcd4621d373cade4e8 ...

  3. xxx.java: Recompile with -Xlint:deprecation for details

    警告而已.有些方法1 已经过时,有更好的方法可以代替,比如 new java.util.Date().getYear(); => cal.get(Calendar.YEAR);2 发现过问题,且 ...

  4. JProfiler解决Java服务器的性能跟踪

    转自:http://www.blogjava.net/anymobile/articles/28248.html

  5. 微信公众帐号开发。大家是用框架还是自己写的流程。现在遇到若干问题。请教各路大仙 - V2EX

    微信公众帐号开发.大家是用框架还是自己写的流程.现在遇到若干问题.请教各路大仙 - V2EX 微信公众帐号开发.大家是用框架还是自己写的流程.现在遇到若干问题.请教各路大仙

  6. Spring、Hello AOP

    AOP 概念:http://blog.csdn.net/moreevan/article/details/11977115 AOP 所使用到的jar 包: aspectjrt.jar common-a ...

  7. Oracle 基础查询知识点

    1.Oracle 别名 如果非固定格式的列名可以如此 select last_name as name from employees 如果想显示固定格式的别名的话,则别名必须使用"" ...

  8. 为Spring添加REST功能

    1 关于REST 我的理解,REST就是将资源以最合适的形式在服务端和客户端之间传递. 系统中资源采用URL进行标识(可以理解为URL路径中带参数) 使用HTTP方法进行资源的管理(GET,PUT,P ...

  9. 纯CSS3实现自定义涂鸦风格的边框

    今天我们要来分享一款基于纯CSS3的自定义边框应用,看上去它像一个Tooltip控件,因为下边框有一个小三角,就像很多地方的引用文本框一样.另外这款CSS3边框是涂鸦风格的,看起来很有个性.用CSS3 ...

  10. gdb调试python

    一.概述 有时我们会想调试一个正在运行的Python进程,或者一个Python进程的coredump.例如现在遇到一个mod_wsgi的进程僵死了,不接受请求,想看看究竟是运行到哪行Python代码呢 ...