`

手机、平板电脑浏览器上页面后退后自动刷新页面

阅读更多
手机、平板电脑浏览器上页面后退后自动刷新页面
运用场景: 从九宫格导航页面跳转到其它页面后,点出浏览器的后退或设备上的后退键。要能够刷新九宫格页面。
  



测试设备:
   GT-P1000 三星平板电脑(其实为大号手机
   操作系统:android2.1
   浏览器:Mobile Safari/533.1
   User Agent打印结果:
       Mozilla/5.0 (Linux; U; Android 2.1; zh-cn; GT-P1000 Build/FROYO) AppleWebKit/533
.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1




<head>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<!-- 以下3个标签在Mobile的文档声明中不起作用,故改用js定时器来后退时的自动刷新 -->
<--
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="cache-control" CONTENT="no-cache">
<meta HTTP-EQUIV="expires" CONTENT="0">
-->
</head>
<script>
/* 使用了2个定时器,一个是每分钟刷新页面,另一个是后退后刷新页面 */
var interval;

function refresh(force){
	if(force){
		//alert("强制每分钟刷新!");
		window.location.reload();
	}else if("true"==getFlag()){
		//alert("后退刷新...");
		window.location.reload();
	}
}

//flag="true"/"false" (后退状态/非后退状态)
function setFlag(flag){
	document.getElementById("isPageBack").value= flag + "";
}

function getFlag(){
	return document.getElementById("isPageBack").value;
}

//导航链接
function navigate(target){
	doClearInterval();
	setFlag(true);
	forward(target);
}

//跳转到下个页面
function forward(target){
	window.location.href="<ww:url value='/mobileNav!navigate.action'/>?navURL="+target;
}

function createInterval(){
	if(interval==undefined){
		//alert("在创建定时器:"+interval);
		interval = setInterval("refresh()", 500);
	}
}

function doClearInterval(){
	if(interval){
		//alert("在清除定时器:"+interval);
		window.clearInterval(interval);
	}
}
</script>
<body onload="createInterval()" onunload="createInterval()">
<input type="text" id="isPageBack" value="false" style="width: 500px;display:none;"/>

</body>
<script>

//每分钟刷新一次
setInterval("refresh(true)", 60000);
</script>



原先尝试用hidden元素来保存页面跳转前写到页面的isPageBack变量,但在safari浏览器,点击后退按钮后hidden元素的值被还原,可使用隐藏的输入框保存isPageBack变量。另外,safari浏览器中,页面后退时不会触发body的onload事件。
0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics