对于同个页面引入不同js文件中重写window.onbeforeunload方法的总结

最近一个客户需求在当前浏览器标签中刷新页面后维持之前的显示状态，非本标签刷新不需要维持这种显示状态。我想到当当前页面刷新时会触发onbeforeunload事件，所以我就重写了window.οnbefοreunlοad= function (){//...};这里向sessionStorage中写入了一些数据。之后遇到了问题！

1.因为在当前页面不只是引入了我的js，还引入了其他组写的js，搜索了一下，很多都重写了window.onbeforeunload这个方法，为了避免覆盖我这么处理了一下: var onbeforeunloadFunction =  window.onbeforeunload; window.onbeforeunload = function () { //... console.log("invoke: my function"); if(typeof onbeforeunloadFunction == "function") { onbeforeunloadFunction(); } } 2.之后测试告诉我刷新页面时出了问题，浏览器有假死状态，我首先想到应该是有死循环（后来证明我的直觉是对的），并且很可能是重写window.onbeforeunload 造成的，之后搜索到了在某个页面一个也重写window.onbeforeunload的js文件引了进来。其中有：

var onbeforeunloadFunction =  window.onbeforeunload; window.onbeforeunload = function () { //... console.log("invoke: another function"); if(typeof onbeforeunloadFunction == "function") { onbeforeunloadFunction(); } } 3.好吧，出问题的原因找到了，根据console.log();发现会一直调用"another function",分析一下：

   3.1.js文件的解析过程是根据html文件中引入顺序，从上到下依次执行。

   3.2.另外一个js文件引入比我早，所以先加载。定义onbeforeunloadFunction 这个变量，此时onbeforeunloadFunction 指向先于它重写的

         window.onbeforeunloadFunction方法（不是我的）

   3.3.挡我的js文件加载后，覆盖了之前的变量onbeforeunloadFunction 这个变量，此时onbeforeunloadFunction 指向先于我重写的

         window.onbeforeunloadFunction方法，也就是第2段的window.onbeforeunload这个方法;

   3.4.当页面刷新之前，会调用我的window.onbeforeunload，console.log();输出“invoke: my function”，然后判断onbeforeunloadFunction

         是否是个已经定义的函数，因为其指向第2段的window.onbeforeunload这个方法;所以会调用之，console.log()输出"invoke: another function",

   3.5.然后进行判断判断onbeforeunloadFunction是否是个已经定义的函数因为其指向第2段的window.onbeforeunload这个方法;所以会调用之，

         console.log()输出"invoke: another function"，然后判断onbeforeunloadFunction是否是个已经定义的函数，同3.4又会调用自己...就无穷了！

4.解决办法我想到两种，其本质就是防止前一个onbeforeunloadFunction变量不被覆盖。

   第一种:就是每个要重写window.onbeforeunload之前保证onbeforeunloadFunction定义的这个变量不要和其他所有人的相同（对于小型项目);

   第二种:就是把这个保证把这块代码写在不同的方法之中，我这写在了$(document).ready(function (){ //...}; 因为我们所有页面都引入了自己改写的

                jQuery;

   记得以后少走弯路 ^_^