JavaScript判断页面加载完之后再执行预定函数的技巧


Posted in Javascript onMay 17, 2016

JavaScript 脚本语言的执行,是需要触发的。一般的做法就是在网页中,直接编写几个函数,有的在代码被加载的时候就被浏览器处理,或者使用类似下面的代码来触发实现函数的相关功能。

<div id=”link” onclick=”fun()” ></div>

上面代码的意思就是,当鼠标点击 id 为 link 的元素的时候,就触发了它的 onclick 事件,然后执行使用 JavaScript 定义的 fun 函数。这样的做法肯定是很不合理的,因为触发操作直接写进了 HTML 结构里面,内容和行为没有隔离开,对日后的二次开发或者修改带来不便。
需要注意的是,当事件处理与对应元素绑定起来的时候,只有在那个元素加载完之后才能进行操作。如果说把处理的脚本放在了 head 区域,浏览器会报错。因为下面的 HTML 元素还没有加载出来,head 中的处理脚本已经被处理了。

一个好的执行 JavaScript 代码的方法应该是 行为内容分离的、在页面加载后处理 的。所以,处理 JavaScript 代码我们要用到 监听器 和 window 对象的 load 事件。

监听器

监听器实际上的功能就是行为与内容分离的。以前需要在 HTML 中加上一些触发事件来触发 JavaScript 的相关函数,而现在直接在 JavaScript 中对某个元素的使用监听器,监听这个元素的事件,如果这个元素被触发了某些事件,在监听器中又定义了这个事件对应的处理函数,那么就会处理这个函数。

W3C 的标准方法叫做 addEventListener ,被IE9,chrome,firefox,opera所支持,写法:

window.addEventListener(‘load',function,false);

早期 IE 中有 attachEvent 方法效果类似:

window.attachEvent(‘onload',function);

使用监听器的方法也很简单,就是先获取页面中的某个元素,然后对这个元素使用监听器,定义监听的事件和对应的事件处理函数,就上文例子:

document.getElementById(‘link').addEventListener(‘click',fun,false);

关于监听器更加详细的使用说明,请见文末补充资料。
window.onload 事件

onload 事件只有在整个页面已经完全载入的时候才会被触发,我们将 JavaScript 代码写进 onload 事件中,就可以保证在 HTML 元素被加载完成之后,浏览器才会处理我们的 JavaScript 代码。基础的写法:

window.onload = function(){
 //code
}

这样,这个函数里面的 code 会在加载完成之后被处理。但是,这种方法有个缺陷,就是只能用于这一个函数。页面中无法出现多个 window.onload 事件,如果出现了多个 onload 事件,那么后面的内容会覆盖前面的。
那么,我们可以这样做,在一个 window.onload 事件中,写上所有需要加载的函数名,然后在外面定义函数:

window.onload = function(){
  func1();
  func2();
 }
function func1(){…}
function func2(){…}

这样做虽然可以,但是很不方便,因为我们需要把所有要加载的函数名都写进去,修改起来就会很麻烦。当然办法肯定是有的,jQuery 就特别提供了很强大的多脚本加载方法,那么原生的 JavaScript 肯定也有办法。

window.onload 同时处理多个函数

我们需要编写一个处理函数,先看一下代码:

function addLoadListener(fn){
    if (typeof window.addEventListener != ‘undefined'){
      window.addEventListener(‘load',fn,false);
    }else if(typeof document.addEventListener != ‘undefined'){
      document.addEventListener(‘load',fn,false);
    }else if (typeof window.attachEvent != ‘undefined'){
      window.attachEvent(‘onload',fn);
    }else{
      var oldfn = window.onload;
      if(typeof window.onload != ‘function'){
        window.onload = fn;
      }else{
        window.onload = function(){
          oldfn();
          fn();
        };
      }
    }
  }

简单的来解析一下,这个自定义的 addLoadListener 函数,传递一个 函数名称 作为参数。它首先判断浏览器是否支持相关的 监听器,如果支持 监听器,就使用 监听器 监听 window 对象的 onload 事件,然后处理这个函数。这段代码使用 if 语句判断了所有浏览器的监听事件,是跨浏览器兼容的。
我们把这段代码放在 JavaScript 代码段的最上面,然后在下面定义相关函数,然后使用下面语句来加载 JavaScript 函数了。

addLoadListener(func);
function func() {…}

这样,有什么 JavaScript 函数是需要在页面加载完成之后处理的,直接使用 addLoadListener 函数即可,而且可以使用多个。通常来说,所有的 JavaScript 最好都使用 onload 事件加载,以避免意外情况发生。

Javascript 相关文章推荐
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 #Javascript
Winform客户端向web地址传参接收参数的方法
May 17 #Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 #Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 #Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 #Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 #Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 #Javascript
You might like
PHP STRING 陷阱原理说明
2010/07/24 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
使用Python写一个小游戏
2018/04/02 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
异常和异常类的概念
2014/09/12 面试题
校园餐饮创业计划书
2014/01/10 职场文书
保护野生动物倡议书
2014/05/16 职场文书
简单租房协议书
2014/10/21 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
一级电子管军用接收机测评
2022/04/05 无线电