html5页面平滑切换实现以及问题(20160120更新)

注:本文是基于手机端 Hybrid APP 讨论,而不是普通的PC端网页 >>

之前的页面跳转方式:

比如有这两个页面:A.html  B.html,  A B 是纯HTML实现,没有采用其他UI框架

A-->B 的跳转方式为 location.href="B.html";  

效果:闪屏刷新,用户体验太差

目前的实现方式:

定义一个母页面里面包含两个iframe用来加载A、B等html页面: _ghost.html:

html:

Catch(11-02-15-43-40)

js:

CatchDCDF(11-02-15-43-40) 母页面初始化的时候获取手机屏幕宽高度给iframe,并且给第一个iframe设置内容

页面切换方法:

CatchC07B(11-02-15-43-40) 页面切换即显示或隐藏两个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!

原文地址:https://www.cnblogs.com/jager/p/4930414.html