標籤:mic doc mob log time logs mat 頁面緩衝 簡單
iso在某些方法為了追求更好的客戶體驗真的很棒,但也讓它和別的瀏覽器不一樣,讓開發人員頭痛的很。
比如最近做一個項目,但都不能分享,但出現了很不好的效果,在當前頁面時是禁止分享了,但當前頁到
下一個頁面後後退到之前的當前頁就出現了分享功能了,這是Safari特殊的緩衝機制效果,就是有點像單頁面
應用可以來回切換頁面而啟用和暫訂頁面,而不是重新整理頁面部分功能,比如安卓,雖然有緩衝機制,但它只是緩衝
某些功能,比如滾動高度等,它還是會執行js檔案的,但iso不是這樣,它是暫訂頁面功能,當你切換回來還會繼續
執行上一次執行的代碼,比如我在版面設定一個定時器,當切換回來還會接上一次繼續執行。
所有Safari鼓勵我們使用window.onpageshow事件來觸發某些因切換回來需要執行的代碼,如觸發內建的方法,
因為在這方法是和安卓的一樣,會重新整理功能,所以你需要觸發某些內建方法,變回初始進來頁面的所需的效果。
資料:傳送門 這方面資料還是國外比較全,國內的資料大部分一些垃圾,沒有一些全面性,而且方法統一有bug。
如使用popstate,pushState配合使用,這也有個很大坑就是重新整理頁面會出現兩次後退才能後退。。。。
而國外有popstate,pushState,瀏覽器本機快取配合使用。。。這個方法邏輯複雜很
popstate,replaceState這個比較簡單。
還有就是pageshow,persisted,這個好用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>pageshow測試</title> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> <script src="jquery-3.1.0.min.js"></script> <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css"> <script src="jquery-ui-1.12.1/jquery-ui.js"></script> <style> .b{ margin-top: 300px; height: 1000px; } button{ width: 100%; height: 30px; } button a{ width: 100%; display: block; } </style></head><body> <div class="b"> <p id="times"><span>計數:</span><span id="t"></span></p> <button><a href="2.html">pagehide測試</a></button> <p id="p"></p> <p id="p3"></p> <p id="p4"></p> </div> <script> var i=0; setInterval(function(){ i++; $("#t").html(i); },1000); $(window).on("pageshow",function(event){ $("#p4").html("是否緩衝:"+event.originalEvent.persisted); $("#p3").html(‘pageshow‘); WeixinJSBridge.call(‘hideToolbar‘); WeixinJSBridge.call(‘hideOptionMenu‘); $("#p").html(‘WeixinJSBridgeReady‘+i); }); document.addEventListener(‘WeixinJSBridgeReady‘, function onBridgeReady() { WeixinJSBridge.call(‘hideToolbar‘); WeixinJSBridge.call(‘hideOptionMenu‘); $("#p").html(‘WeixinJSBridgeReady‘); }); function isiOS(){ var u = navigator.userAgent; var isWeiXin = u.indexOf(‘MicroMessenger‘) > -1; // var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 if(isWeiXin&&isiOS){ return true; }else{ return false; } } </script></body></html>
onpageshow和onpagehide
event對象也包含persisted屬性
iso移動Safari頁面緩衝