注:本文是基於手機端 Hybrid APP 討論,而不是普通的PC端網頁 >>
之前的頁面跳轉方式:
比如有這兩個頁面:A.html B.html, A B 是純HTML實現,沒有采用其他UI框架
A-->B 的跳轉方式為 location.href="B.html";
效果:閃屏刷新,用戶體驗太差
目前的實現方式:
定義一個母頁面里面包含兩個iframe用來加載A、B等html頁面: _ghost.html:
html:
js:
母頁面初始化的時候獲取手機屏幕寬高度給iframe,並且給第一個iframe設置內容
頁面切換方法:
頁面切換即顯示或隱藏兩個iframe,這里引用jqm里面的changPage方法來實現頁面平滑切換,當然是用其他方式也可以實現,比如用jquery的animation動畫效果,下述問題與這里是否采用jqm無關,已驗證
至此,頁面的平滑切換效果實現好了!
細節問題(未解決):
A.html頁面有綁定一個系統返回鍵的事件,在A.js里面定義
document.addEventListener("backbutton", eventBackButton, false); // backbutton事件是cordova.js框架提供的
function eventBackButton() {
MyApp.showFloatMsg('再按一次退出程序.');
。。。
}
所以在A.html第一次加載到iframe里面之后點擊返回鍵會提示“再按一次退出程序”,到這一步是正常的
-----------------------------分割,下面問題出現-------------------------------
從A.html --> B.html (通過上述changePage方法),到了B.html點擊返回鍵,沒有效果,返回事件失效
當然如果在A-->B 的時候 把backbutton事件移除,則到了B.html點擊返回鍵,可以正常返回到A.html,但是A.js未執行,而且在A.html上繼續點返回鍵又回到B.html,接着如果繼續按返回鍵,則:-->A-->退出
-----------------------------分割,說明----------------------------------------
以上的修改都是盡最大可能不修改A.html A.js B.html B.js的內容為前提,因為類似AB 大概有1百多個頁面
--------------------------------------20160120更新------------------------------------------
今天第一次用mui在開發demo的時候,突然發現mui采用的是類似的方案,真實欣喜若狂,看這:
http://dev.dcloud.net.cn/mui/window/#openwindow
后續有時間,用這個方案實現下,good!