共享onload事件

由于在使用JavaScript 对HTML文件进行行为控制的时候，首先需要浏览器把HTML文件加载完成，才能正确的执行JS代码。文档将被加载到浏览器窗口里，document对象又是window 对象的一个属性。当window 对象触发onload事件时，document对象就已经存在。
那么我们只需要把要执行的函数添加到window对象的onload 事件上，代码就可以正确运行。

window.onload = 函数名

但是很显然，很多情况下JS文件里不可能只有一个函数，那么如何共享onload事件呢？
例如，在页面加载完成时需要执行 firstFunction 和 SecondFunction ，这两个函数。如果直接这样写

window.onload = firstFunction;
window.onload = secondFuction;

secondFunction将会取代firstFunction，也就是firstFunction有可能在页面没加载完成，它就会开始执行。so 解决方法：
方法一（蠢）
直接新定义一个最大的函数把所有函数包起来，在将这个最大函数添加到 onload 事件上。
方法二、由Simon Willison 写的一个函数，名叫addLoadEvent ，只有一个参数，就是要在页面加载完成时执行的函数名。

function addLoadEvent(func){var oldonload = window.onload; //将现有的window.onload 事件处理函数,存在这里
if(typoef window.onload!='function'){//如果这个处理函数上还没有绑定任何函数，就像平常那样把新函数添加给它。window.onload = func;}else{//如果已经绑定了函数，就把新函数加到现有指令的末尾window.onload = function(){oldonload();func();}}
}

相当于把那些页面加载完成时要执行的函数维护一个队列。
之前的那两个函数只需要这样

 addLoadEvent( firstFunction);addLoadEvent( secondFunction);

(由于这一部分知识我想了很久才懂，发出来记录一下)

共享onload 事件相关推荐

共享onload事件
function addLoadEvent(func){var oldonload = window.onload;if (typeof window.onload !='function') {wi ...
iframe的onload事件
很多时候,我们会需要改变一个iframe的地址(src属性),或者使用表单(form)的target在指定的iframe进行提交后,在 iframe加载完毕(onload)时立即响应某个操作,以提高W ...
加载多个js onload事件
1.将要加载的内容放到onload事件中 (如果出现多个onload可能会出现函数覆盖) 2.使用 document.attachEvent('onreadystatechange',initJS1) ...
原生js中如果有多个onload事件解决方案
原生js中如果有多个onload事件解决方案参考文章: (1)原生js中如果有多个onload事件解决方案 (2)https://www.cnblogs.com/happy-8090/p/11830 ...
JavaScript之共享onload
我们知道,当我们将JS代码脚本放到<head></head>标签之间时,这是的js代码加载要先于DOM加载,而我们往往会在JS代码脚本中写一些获取DOM元素的代码,而此时的DO ...
php iframe js加载不上,js iframe的onload事件不去作用的原因及解决办法
通过createElement_x_x创建的iframe的onload事件在有些时候不响应,具体原因和解决办法如下. 首先,我们来看一下下面这种方法: function createFrame(){ ...
jQuery的$(document).ready()和JavaScript onload事件
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <metacharset="utf-8"> <ht ...
jquery中DOM加载事件，onload事件和ready事件
全栈工程师开发手册 (作者:栾鹏) jquery系列教程4-事件操作全解 jquery中DOM加载事件 jquery中的DOM加载事件分为onload事件和ready事件.,具体功能如代码中注释. 代 ...
uniapp在onLoad事件中不显示showToast的问题
如题,最近开发uniapp,发现在onLoad事件中写的showToast无法正常显示,代码如下: onLoad(option){// 判断是否登录if (!this.hasLogin) {uni.s ...

共享onload 事件

共享onload事件

共享onload 事件相关推荐

最新文章

热门文章