最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
IOS上运行javascript的onbeforeunload
时间:2015-04-24 编辑:简简单单 来源:一聚教程网
1、onbeforeunload事件:
说明:目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
用法:
・object.onbeforeunload = handler
・
描述:
事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。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);
} */
}
相关文章
- 无线网连接提示没有有效的IP配置解决方法 03-08
- javascript实现下雨效果 07-28
- javascript实现圣旨卷轴展开效果(代码分享) 07-20
- JavaScript实现星星等级评价功能 07-14
- javascript实现滑动解锁功能 07-14
- 十大热门的JavaScript框架和库 07-13