onload、onpageshow、onpagehide、onbeforeunload、onunload的謠言糾正及特點介紹

謠言一、chrome不支持unload、onbeforeunload

              為什么說不支持呢？因為你使用alert，confirm，promot用來測試是否可用了！在unload和onbeforeunload方法執行的時候alert，confirm，promot這三個方法已經被注銷了，所以無法執行。

              

       //錯誤
    window.addEventListener('beforeunload', function() {
                    alert(1)
            })

 

謠言二、在使用以上方法不能通過addevertlisener的方式使用

              因為通過add的方法添加方法的時候要去掉on，否則瀏覽器不識別。

             

       //錯誤
      window.addEventListener('onbeforeunload', function() {
                if(localStorage.getItem('hahah')) {
                    localStorage.setItem('hahah', '11')
                    return
                }
                localStorage.setItem('hahah', '3')
            })

 

 

執行順序,通過查看本地的localstorage就可以明白了，😁

           //執行順序  onpagethide到onbeforeunload到unload
            window.onpagehide = function(){
                localStorage.setItem('hahah','1')
            }
            window.onbeforeunload = function(){
                localStorage.setItem('hahah','2')
            }
            window.onunload = function(){
                localStorage.setItem('hahah','3')
            }

觸發方式

            //刷新，跳轉，關閉都會觸發
            window.onpagehide = function(){
                if(localStorage.getItem('hahah')){
                    localStorage.setItem('hahah','11')
                    return
                }
                localStorage.setItem('hahah','3')
            }

區別

      為了說明bfcache行為提供了pagehide和pageshow(若頁面在bfcahe中，再次打開頁面不會觸發load)。這兩個事件的event中存在persisted屬性，在pageshow中若頁面從bfcache中加載，那么persisted為true。在pagehide中若頁面卸載后會被保存到bfcache中那么persisted為true。

注意

       指定了onunload事件處理程序的頁面會自動排除在bfcache之外，即使事件處理程序為空。