一个页面中执行两个window.onload函数

最新推荐文章于 2021-11-26 20:21:26 发布
最新推荐文章于 2021-11-26 20:21:26 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： html jsp
jsp 同时被 2 个专栏收录
17 篇文章 0 订阅
订阅专栏
html
16 篇文章 0 订阅
订阅专栏

1.问题描述:

当一个HTML页面中加载了两个window.οnlοad=function() {};函数时,页面只会执行第二个window.onload里面的内容

如下,结果显示2:

[html]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  5. <title>test</title>   
  6. <script language="javascript">   
  7. window.onload = function() {  
  8.     alert('1');  
  9. };  
  10.   
  11. </script>   
  12. </head>   
  13. <body>  
  14.     <h1>表格</h1>  
  15.       
  16.     <script type="text/javascript">  
  17.         window.onload = function() {  
  18.             alert('2');  
  19.         };  
  20.     </script>  
  21. </body>   
  22. </html>    


2.解决方法如下,可以显示1,2:

[html]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  5. <title>test</title>   
  6. <script language="javascript">   
  7. window.onload = function() {  
  8.     alert('1');  
  9. };  
  10.   
  11.   
  12.   
  13.   
  14. </script>   
  15. </head>   
  16. <body>  
  17.     <h1>表格</h1>  
  18.       
  19.     <script type="text/javascript">  
  20.         var saved;  
  21.         if (typeof window.onload == 'function') {  
  22.             saved = window.onload;  
  23.         }  
  24.         window.onload = function() {  
  25.             if (saved) saved();  
  26.             alert('2');  
  27.         };  
  28.     </script>  
  29. </body>   
  30. </html>    

3.优化成函数:

[javascript]  view plain copy
  1. function addEvent(obj,evt,fn) {                                           
  2.     var saved;  
  3.     if (typeof obj["on"+evt] == "function") {  
  4.         saved = obj["on"+evt];  
  5.     }  
  6.     obj["on"+evt] = function () {  
  7.         if (saved) saved();       
  8.         fn();                 
  9.     }                     
  10. }  


 

如下,跟2一样:

[html]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  5. <title>test</title>   
  6. <script language="javascript">   
  7. function addEvent(obj,evt,fn) {                                           
  8.     var saved;  
  9.     if (typeof obj["on"+evt] == "function") {  
  10.         saved = obj["on"+evt];  
  11.     }  
  12.     obj["on"+evt] = function () {  
  13.         if (saved) saved();       
  14.         fn();                 
  15.     }                     
  16. }  
  17. addEvent(window,'load',firstAll);  
  18. function firstAll() {  
  19.     alert('1');  
  20. }  
  21. </script>   
  22. </head>   
  23. <body>  
  24.     <h1>表格</h1>  
  25.       
  26.     <script type="text/javascript">  
  27.         addEvent(window,'load',nextAll);  
  28.         function nextAll() {  
  29.             alert('2');  
  30.         }  
  31.     </script>  
  32. </body>   
  33. </html>    
  34. http://blog.csdn.net/van416521/article/details/6953556#
sky_yu_new
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于执行多个window.onload方法的疑惑
weixin_45190226的博客
12-02 581
下面代码特点是： 在<script>标签中前面有两个wondow.onload函数，后面用addLoadEvent函数统一调用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>执行多个window.onload匿名函数</title> <style type="text/css">
解决两个window.onload()问题
m0_52596096的博客
11-15 584
【代码】解决两个window.onload()问题。
两个window,onload=function(){}不全部加载
littlebearGreat——宁静致远
05-27 875
一个简单的问题，随手分享一下今天朋友问我：有两个js脚本，脚本中的js都写在window.onload = function(){}中，为什么有一个不执行。原因很简单，因为js中，window是一个对象，window下有一个属性是onload。把一个function赋值给window.onload就出现了window.onload = function(){};两个脚本，对window.onloa...
一个页面中多个window.onload = function(){}冲突问题解决方案
08-17 8755
假如在一个js里面需要window.onload两个方法： 方法1：写成这样就可以了 window.onload=function(){function(a);function(b);} 也就是集中window.onload一次。 方法2： window.onload=function(){ alert("加载完成"); onload2(
window.addEventListener来解决让一个js事件执行多个函数
10-27
例如，如果我们有多个需要在页面加载后运行的函数`function1`、`function2`和`function3`，直接使用`window.onload`只会让最后一个注册的函数`function3`被执行。 为了解决这个问题，我们可以使用`window....
多种方法实现当jsp页面完全加载完成后执行一个js函数
10-26
同时，为了确保在DOM解析完成时也能执行该函数，代码中还包含了一个检查`document.readyState`的条件，如果状态已经是“complete”，则立即执行`openTheIndexPage()`。 2. **在`<body>`标签的`onload`属性中指定...
Jqyery中同等与js中windows.onload的应用
10-28
在JavaScript中，`window.onload` 是一个非常关键的事件，用于确保在页面所有资源（包括图像、脚本、样式表等）完全加载之后再执行指定的函数或代码块。这通常用于那些依赖于页面元素存在的操作，因为这些操作需要...
把多个JavaScript函数绑定到onload事件处理函数上的方法
11-22
这个函数接受一个参数，即需要在页面加载完成后执行的函数名，并确保这个函数被正确地添加到`window.onload`事件处理函数中，即使已经有其他函数在那里注册过。 `addLoadEvent`的工作原理如下： 1. 获取当前`...
多个window.onload的使用
我爱骑呆马的专栏
06-03 1419
window.onload = function(){ var para =document.createElement("p"); var info = "NodeName:"; info += para.nodeName; info += " NodeType:"; info += para.nodeType; alert(info);
onload执行多个函数
马如林的IT博客
03-10 5356
<!--function a() { alert("a"); var t = document.getElementById("name").value;  document.getElementById("name").value = t + "xx";}function b() { alert("b");}  // -->   function
如何在一个网页使用两个onload
lifeiinc的专栏
08-29 1179
一个html只能读取一个onload事件，所以如果想onload多个函数，可以用一下方法。         同时调用多个函数的方法：
多个window onload的解决办法
MrFano的博客
01-25 1981
  同一个页面有很多函数要用到window.onload,但又互相冲突，怎么解决呢，下面是看到的一个函数，和大家分享一下。 function addLoadEvent(func){  // 多个window.onload共用的封装函数     var oldonload=window.onload;      if(typeof window.onload!='function'){   ...
HTML DOM 教程 - 对象(1)
伟大的饺子
04-15 435
Window 对象Window 对象是 JavaScript 层级中的顶层对象。Window 对象代表一个浏览器窗口或一个框架。Window 对象会在 或 每次出现时被自动创建。有关 Window 对象的详细描述。IE: Internet Explorer, F: Firefox, O: Opera.Window 对象的集合
window.onload用法详解
biaogeshiwo的博客
11-03 426
http://www.softwhy.com/forum.php?mod=viewthread&tid=6191
javascript中怎么让一个页面执行多个window.onload？
weixin_30781107的博客
10-21 309
我们都知道在javascript中window.onload 只能有一个如果有多个的话后面的会覆盖前面的，今天我们来看看怎么让一个页面执行多个window.onload <script type="text/javascript"> function addLoadEvent(func){ var oldon1oad=window.on1oad;//得到上一...
执行多个window.onload匿名函数的方法
weixin_45190226的博客
11-26 1023
业务需求：在body里面创建一个div元素，点击div元素能够复制div节点，将复制后的div加载到原有的div节点后面，并且重新设置克隆后的div节点的样式。 JS代码特点：在JS语句中有两个window.onload匿名函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>执行多个window.onload匿名函数</title&g
解决一个页面多个window.onload问题
16个夏天。。。
07-13 3715
两个window.onload测试 alert("开始"); window.onload = function() { alert("第一个"); }; window.onload = function() { alert("第二个"); }; window.onload 不仅仅适用于 window 对象，还可用文档节点、document
一个页面中多个window点onload解决方法
FangYifei的博客
09-17 3755
转载原文：https://www.cnblogs.com/happyty/articles/2427358.html 比如在一个页面中有两个JavaScript 分别都用到了window.onload 一个是:window.onload=function(a){...} 另一个是:window.onload=function(b){...}这样就造成了一个JavaScript 运行不了(一般...
window.onload可否在一个页面使用两次
最新发布
05-25
是可以的，可以在同一个页面中使用多次window.onload()函数，但是后面的会覆盖前面的。如果需要同时执行多个函数，可以使用addEventListener()方法来添加多个事件处理程序。例如： ``` window.addEventListener('load', function() { // 第一个事件处理程序 }); window.addEventListener('load', function() { // 第二个事件处理程序 }); ``` 这样两个事件处理程序就可以同时执行了。需要注意的是，addEventListener()方法的兼容性可能存在问题，建议先进行浏览器兼容性测试。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值