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事件機制，解決冗餘代碼問題，提高代碼的可讀性。