IOS上運行javascript的onbeforeunload

來源:互聯網
上載者:User

1、onbeforeunload事件:
  說明:目前三大主流瀏覽器中firefox和IE都支援onbeforeunload事件,opera尚未支援。
用法:
·object.onbeforeunload = handler
·<element onbeforeunload = “handler” … ></element>
描述:
事件觸發的時候彈出一個有確定和取消的對話方塊,確定則離開頁面,取消則繼續待在本頁。handler可以設一個傳回值作為該對話方塊的顯示文本。
  觸發於:
  ·關閉瀏覽器視窗
  ·通過地址欄或收藏夾前往其他頁面的時候
  ·點擊返回,前進,重新整理,首頁其中一個的時候
  ·點擊 一個前往其他頁面的url串連的時候
  ·調用以下任意一個事件的時候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit.
  ·當用window open開啟一個頁面,並把本頁的window的名字傳給要開啟的頁面的時候。
  ·重新賦予location.href的值的時候。
  ·通過input type=”submit”按鈕提交一個具有指定action的表單的時候。
  可以用在以下元素:
  ·BODY, FRAMESET, window
  平台支援:
  IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+


今天在做項目的時候,組長讓我用iPad測試一下前面寫的離線緩衝,後退不重新整理頁面,發現在iPad上onbeforeunload函數在iPad上一帶而過,不運行???

無奈之下,發現原來在IOS上,有自己的onshow和onhide方法  //搜尋來自:http://www.cnblogs.com/vaal-water/archive/2012/09/25/2701769.html

原文如下:

 window.addEventListener("pageshow", myLoadHandler, false);
 window.addEventListener("pagehide", myUnloadHandler, false);


    function myLoadHandler(evt)
    {
        if (evt.persisted) {
            // This is actually a pageshow event and the page is coming out of the Page Cache.
            // Make sure to not perform the "one-time work" that we‘d normally do in the onload handler.
            ...

            return;
        }

        // This is either a load event for older browsers,
        // or a pageshow event for the initial load in supported browsers.
        // It‘s safe to do everything my old load event handler did here.
        ...
    }

    function myUnloadHandler(evt)
    {
        if (evt.persisted) {
            // This is actually a pagehide event and the page is going into the Page Cache.
            // Make sure that we don‘t do any destructive work, or work that shouldn‘t be duplicated.
            ...

            return;
        }

        // This is either an unload event for older browsers,
        // or a pagehide event for page tear-down in supported browsers.
        // It‘s safe to do everything my old unload event handler did here.
        ...
    }

    if ("onpagehide" in window) {
        window.addEventListener("pageshow", myLoadHandler, false);
        window.addEventListener("pagehide", myUnloadHandler, false);
    } else {
        window.addEventListener("load", myLoadHandler, false);
        window.addEventListener("unload", myUnloadHandler, false);
    }
原文 http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

我自己的程式如下:
先寫了一個判斷是不是IOS系統的方法:
function isIOS() {
    var userAgentInfo = navigator.userAgent;
    var Agents = [ "iPhone","iPad"];
    var flag = false;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = true;
            break;
        }
    }
    return flag;
}
等於這個:
var nav = window.navigator.userAgent.toLowerCase();
var ipad = nav.indexOf("ipad");

我的理解是:
當頁面載入完的時候給window載入監聽器
 window.addEventListener("pagehide", myUnloadHandler, false);
 window.addEventListener("pageshow", myLoadHandler, false);

系統自動識別是不是IOS系統,然後做出處理
if(!parent.isIOS()){}    //或者是if(ipad != -1){}

當IOS系統載入的時候,執行myloadHandler函數(相當於js的onload函數),當離開頁面的時候執行myUnloadHandler函數(相當於js的onbeforeunload函數),
然後在myloadHandler函數中做出你要執行的載入頁面時觸發的事件,在myUnloadHandler函數中做出你要離開頁面時觸發的事件


全部代碼以及冗餘代碼如下:沒有刪減
var nav = window.navigator.userAgent.toLowerCase();
alert(nav);
var ipad = nav.indexOf("ipad");
alert(parent.isIOS());
if(!parent.isIOS()){
    alert("ipad");
    alert("SUCCESS");
 window.addEventListener("pagehide", myUnloadHandler, false);
 /* window.addEventListener("pageshow", myLoadHandler, false);
    function myLoadHandler(evt)
    {
        alert("myLoadHandler");
        start = parseInt(sessionStorage.getItem("start"+token));
        paramFlag = sessionStorage.getItem("paramFlag"+token);
        tokenDiv = sessionStorage.getItem("tokenDiv"+token);
        //$("#tokenDiv").html(tokenDiv);   由於放在sessionstorage中的div的id都一樣,故吧時間戳記作為唯一標識ID
        $("#tokenDiv").html(tokenDiv);
    } */

    function myUnloadHandler(evt)
    {
        alert("myUnloadHandler");
        alert("離開頁面了");
    var tokenDiv = $("#tokenDiv").html();
    sessionStorage.setItem("tokenDiv"+token,tokenDiv);
    sessionStorage.setItem("start"+token,start);
    sessionStorage.setItem("paramFlag"+token,paramFlag);
    }
}
window.onbeforeunload = function(){
    
    alert("離開頁面了");
    var tokenDiv = $("#tokenDiv").html();
    sessionStorage.setItem("tokenDiv"+token,tokenDiv);
    sessionStorage.setItem("start"+token,start);
    sessionStorage.setItem("paramFlag"+token,paramFlag);
   /*  if ("onpagehide" in window) {
        alert("one");
        window.addEventListener("pageshow", myLoadHandler, false);
        window.addEventListener("pagehide", myUnloadHandler, false);
    } else {
        alert("two");
        window.addEventListener("load", myLoadHandler, false);
        window.addEventListener("unload", myUnloadHandler, false);
    } */
    }

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.