JavaScript执行多个window.onload产生too much recursion错误

  问题描述

测试浏览器：Firefox 3.5.9
Web程序中利用JavaScript执行多个window.onload事件是非常普通的，但如果使用中要保证每个window.onload事件执行，通用的解决方案如下：

1. <script type="text/javascript">
2. var func = window.onload;
3. window.onload = function(){
4.     func ? func() : 0;
5.     alert(1);
6. }
7. </script>

这样的原理就是把window.onload事件一级一级传递，保证每一个window.onload事件能执行，但如果出现多次调用而且变量名一样，就会产生too much recursion错误，如下

1. <script type="text/javascript">
2. var func = window.onload;
3. window.onload = function(){
4.     func ? func() : 0;
5.     alert(1);
6. }
7.  
8. func = window.onload;
9. window.onload = function(){
10.     func ? func() : 0;
11.     alert(2);
12. }
13. </script>

上面实现执行两个window.onload事件，但由于每次传递window.onload事件定义为相同的变量名，就会产生too much recursion错误。

解决方法
由于产生的原因是因为定义为相同的变量名产生循环执行代码，因此解决方法只需要把变量名定义不同即可解决。如下

1. <script type="text/javascript">
2. var func = window.onload;
3. window.onload = function(){
4.     func ? func() : 0;
5.     alert(1);
6. }
7.  
8. func1 = window.onload;
9. window.onload = function(){
10.     func1 ? func1() : 0;
11.     alert(2);
12. }
13. </script>

Web页面如果出现多次window.onload事件，尽量能合并操作处理，或实现类似于jQuery的ready事件机制，解决冗余代码问题，提高代码的可读性。