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 相关文章推荐
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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文件中bom的PHP代码
2012/03/13 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Django中几种重定向方法
2015/04/28 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
python自动下载图片的方法示例
2020/03/25 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
应届毕业生的自我鉴定
2013/11/13 职场文书
建筑工地大门标语
2014/06/18 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
趣味运动会简讯
2015/07/20 职场文书
改进工作作风心得体会
2016/01/23 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js