解决一个页面多个window.onload问题

最新推荐文章于 2023-10-25 17:59:27 发布

16个夏天

最新推荐文章于 2023-10-25 17:59:27 发布

阅读量3.7k

点赞数

分类专栏： js/jQuery

本文链接：https://blog.csdn.net/xiaoxiangyu5/article/details/46861189

版权

js/jQuery 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<pre name="code" class="html"><title>两个window.onload测试</title>
<script type="text/javascript" src="js/testOne.js"></script>
<script type="text/javascript">
    alert("开始");
    window.onload = function()
    {
	alert("第一个");
	};
	window.onload = function()
	{
		alert("第二个");
	};
</script>
</head>
<body>
<div>window.onload</div>
</body>

不仅仅适用于 window 对象，还可用文档节点、document 或 XMLHttpRequest。

在页面中，只会执行后一个window.onload ，如果交换了两个function的位置，那么也是最后一个会覆盖前面的所有函数.

解决方法一：

<script type="text/javascript">
window.οnlοad=function(){
  function a(){
    document.getElementById("bg").style.backgroundColor="#F90";
  }
  function b(){
    document.getElementById("bg").style.width="200px";
  }
  a();
  b();
}
</script>
</head>
<body>
  <div id="bg"></div>
</body>

运行后，两个方法都会执行（宽度和背景颜色都会显示）。

解决方法二：

可以使用addEventListener()和attachEvent()为onload事件绑定事件处理函数

<span style="font-size:12px;"><script type="text/javascript">
window.addEventListener("<span style="background-color: rgb(255, 0, 0);">load</span>",bg,<span style="color:#FF0000;">false</span>);//<span style="font-size:12px;">addEventListener()是当前标准的一种事件处理函数绑定方式</span>,<span style="font-size:12px;">IE8和IE8以下的浏览器并不支持此方式</span>
<span style="color:#FF0000;">window.addEventListener("load",changeW,false);<code class="html plain"><span style="font-family:微软雅黑, 微软雅黑, sans-serif;font-size:12px;"><span style="LINE-HEIGHT: 20px; WORD-SPACING: 1px;">//用于Mozilla/Firefox </span></span></code></span>

//<code class="html plain">window.attachEvent("<span style="color:#FF0000;">onload</span>",bg);<span style="font-family:微软雅黑, 微软雅黑, sans-serif;font-size:12px;color:#111111;"><span style="LINE-HEIGHT: 20px; WORD-SPACING: 1px;"></span></span></code><code class="html plain"><span style="color:#111111;"><span style="font-family:微软雅黑, 微软雅黑, sans-serif;">//</span></span>attachEvent</code>事件是以"on"开头的，而addEventListener，事件不是以"on"开头，还有第三个参数，一般指定false就可以。<code class="html plain"><span style="font-family:微软雅黑, 微软雅黑, sans-serif;font-size:12px;color:#111111;"><span style="LINE-HEIGHT: 20px; WORD-SPACING: 1px;"></span></span></code></span><div class="line number16 index15 alt1"><code class="html plain">//<span style="color:#FF0000;">window.attachEvent("onload",changeW);//</span></code><span style="color:#FF0000;"><code class="html plain"><span style="font-family:微软雅黑, 微软雅黑, sans-serif;font-size:12px;"><span style="LINE-HEIGHT: 20px; WORD-SPACING: 1px;">,</span></span></code><code class="html plain"><span style="font-family:微软雅黑, 微软雅黑, sans-serif;font-size:12px;"><span style="LINE-HEIGHT: 20px; WORD-SPACING: 1px;">Mozilla/Firefox不支持这个方法,</span></span></code><code class="html plain"><span style="font-family:微软雅黑, 微软雅黑, sans-serif;font-size:12px;"><span style="LINE-HEIGHT: 20px; WORD-SPACING: 1px;">,用于IE</span></span></code></span><code class="html plain"><span style="font-family:微软雅黑, 微软雅黑, sans-serif;font-size:12px;color:#111111;"><span style="LINE-HEIGHT: 20px; WORD-SPACING: 1px;"></span></span></code></div>
 function bg(){
  document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
  document.getElementById("bg").style.width="2000px";
}
</script>
</head>
<body>
  <div id="bg">招待费</div>
</body>

为了兼容各浏览器，需要将以上代码进行改造:

<script type="text/javascript">
//<span style="font-size:12px;">通过if语句判断对象是否具有addEventListener属性，如果有这使用addEventListener()函数，否则使用attachEvent()函数。</span>
 <span style="color:#FF0000;">if(window.addEventListener){
  window.addEventListener("load",bg,false);
  window.addEventListener("load",changeW,false);
}
else{
  window.attachEvent("onload",bg);
  window.attachEvent("onload",changeW);
}</span>
 
function bg(){
  document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
  document.getElementById("bg").style.width="200px";
}
</script>

在近来的工作中，用到了attachEvent方法，该方法可以为某一事件附加其它的处理事件，有时候可能比较有用，这里将其基本用法总结一下。
其语法可以查看《DHTML手册》，里面有详细的说明，这里贴一个例子，该例子来自互联网：
document.getElementByIdx_x_x_x("btn").onclick = method1;
document.getElementByIdx_x_x_x("btn").onclick = method2;
document.getElementByIdx_x_x_x("btn").onclick = method3;
如果这样写,那么将会只有medhot3被执行
写成这样：
var btn1Obj =document.getElementByIdx_x_x_x("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
执行顺序为method3->method2->method1
如果是Mozilla系列，并不支持该方法，需要用到addEventListener
var btn1Obj =document.getElementByIdx_x_x_x("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3

16个夏天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决一个页面多个window.onload问题

两个window.onload测试 alert("开始"); window.onload = function() { alert("第一个"); }; window.onload = function() { alert("第二个"); };window.onload不仅仅适用于 window 对象，还可用文档节点、document
复制链接

扫一扫