JavaScript之共享onload

我们知道,当我们将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>

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

转载于:https://www.cnblogs.com/GreenLeaves/p/5726271.html

JavaScript之共享onload相关推荐

共享onload 事件
共享onload事件由于在使用JavaScript 对HTML文件进行行为控制的时候,首先需要浏览器把HTML文件加载完成,才能正确的执行JS代码.文档将被加载到浏览器窗口里,document对象又 ...
jQuery中的read 和JavaScript中的onload函数的区别
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript中,onload函数是最经常用到的,这个函数的作用是等待网页完全加载之后再去执行代码块中的语句,因为按照 ...
JavaScript是如何工作的：JavaScript的共享传递和按值传递
关于JavaScript如何将值传递给函数,在互联网上有很多误解和争论.大致认为,参数为原始数据类时使用按值传递,参数为数组.对象和函数等数据类型使用引用传递. 按值传递和引用传递参数主要区别简 ...
JavaScript：window.onload问题
前几天做一个点击按钮,就实现切换图片效果的小demo时,代码看上去没问题,就是达不到效果.让我百思不得其解. 代码如下: <!DOCTYPE html> <html><h ...
pb string 接收dll按值返回_JavaScript 是如何工作的：JavaScript 的共享传递和按值传递...
关于JavaScript如何将值传递给函数,在互联网上有很多误解和争论.大致认为,参数为原始数据类时使用按值传递,参数为数组.对象和函数等数据类型使用引用传递. 按值传递和引用传递参数主要区别简 ...
JavaScript中的onload详解
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群):757345416 下面我们先写代码: <!DOCTYPE html> <html lang="en&qu ...
JavaScript的window.onload事件的理解
window.onload()的作用 window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法. window.onload() 通常用 ...
共享onload事件
function addLoadEvent(func){var oldonload = window.onload;if (typeof window.onload !='function') {wi ...
jQuery的$(document).ready()和JavaScript onload事件
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <metacharset="utf-8"> <ht ...

JavaScript之共享onload

JavaScript之共享onload相关推荐

最新文章

热门文章