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);
} */
}