javascript - window.onload被覆盖,怎么解决?
问题描述
window.onload = function(){ var para =document.createElement('p'); var info = 'NodeName:'; info += para.nodeName; info += ' NodeType:'; info += para.nodeType; alert(info); } window.onload = function(){ var para = document.getElementById('testid'); var e = document.createElement('p'); var txt = document.createTextNode('hello zmz'); para.appendChild(e); e.appendChild(txt); }
只执行了第二个window.onload,但是我想让两个window.onload都执行。该怎么处理?
问题解答
回答1:我们都知道onload事件只能执行一次,所以假设你要运行两个onload时候执行的函数,最后只能执行后一个onload事件的函数,那么我们如何执行多个onload事件的函数呢,形式如下:
window.onload = function(){num1();num2();}
所以,我们就顶一个函数addLoadEvent(func),它只接受参数,就是在页面加载完毕时执行的函数的名字
function addLoadEvent(func){ var oldonload = window.onload; //把现在有window.onload事件处理函数的值存入变量oldonload。 if(typeof window.onload != ’function’){ //如果这个处理函数还没有绑定任何函数,就像平时那样把新函数添加给它 window.onload = func; }else{ //如果在这个处理函数上已经绑定了一些函数。就把新函数追加到现有指令的末尾 window.onload = function(){ oldonload(); func(); } } }
调用:
addLoadEvent(num1);addLoadEvent(num2);回答2:
window.addEventListener(’load’,function(e){state1},false);window.addEventListener(’load’,function(e){state2},false);不建议用onload
回答3:建议 一个页面就一个window.onload
window.onload = function(){ var para =document.createElement('p'); var info = 'NodeName:'; info += para.nodeName; info += ' NodeType:'; info += para.nodeType; alert(info); var para = document.getElementById('testid'); var e = document.createElement('p'); var txt = document.createTextNode('hello zmz'); para.appendChild(e); e.appendChild(txt); }
如果怕命名冲突,可用封闭空间
window.onload = function(){ (function(){var para =document.createElement('p'); var info = 'NodeName:'; info += para.nodeName; info += ' NodeType:'; info += para.nodeType; alert(info); })();(function(){var para = document.getElementById('testid'); var e = document.createElement('p'); var txt = document.createTextNode('hello zmz'); para.appendChild(e); e.appendChild(txt); })();} 回答4:
方法1
function fn1(){ var para =document.createElement('p'); var info = 'NodeName:'; info += para.nodeName; info += ' NodeType:'; info += para.nodeType; alert(info); }function fn2(){ var para = document.getElementById('testid'); var e = document.createElement('p'); var txt = document.createTextNode('hello zmz'); para.appendChild(e); e.appendChild(txt); }window.onload = function(){ fn1(); fn2();}
方法2是用楼上的方法。
window.addEventListener(’load’,function(e){fn1();},false);window.addEventListener(’load’,function(e){fn2();},false);
相关文章:
1. c++ - QWebEngineView加载url后直接点击链接没有反应要怎么解决?2. javascript - vuex报错 this.$store.dispatch is not a function,怎么解决?3. css3 - 我的css用less写的,eclipse的jsp文件要修改css很麻烦,怎么解决?4. 在win7上安装2015vc++运行库安装失败怎么解决?5. javascript - 前端开发 本地静态文件频繁修改,预览时的缓存怎么解决?6. mysql - workbench 切换中文无效怎么解决??7. python - angular route 与 django urls 冲突怎么解决?8. javascript - vue: 父组件给子组件传递数据,子组件接收到了,但是报错,怎么解决?9. 请问这个怎么解决?10. angular.js - Beego 与 AngularJS的模板格式冲突,该怎么解决?

网公网安备