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

测试设备:
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事件。