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

85 浏览量更新于2023-03-03 收藏 57KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

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'){

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38638002

粉丝: 4
资源: 977

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈