如图:需求-----从A页面依次打开到→B→C。。。。。等多个页面之后,返回时也是依次关闭(。。。C→B→A)。
说明:hello mui的i打开方法,若打开一个子页面问题不大,打开多个,则会返回时立刻跳到首页(A)
hello H5+中的打开方法,可以实现依次打开又能依次关闭,但是,打开的时候等待时间略久。
问题:有没有比较好或者说比较简单的链式打开方式和后退方式。还是说我哪里处理的不OK?劳烦解惑。
- 发布:2015-04-14 15:42
- 更新:2015-04-15 09:39
- 阅读:2444
烟雨江南 (作者) - 随便来
//处理右上角关于图标的点击事件;
var subWebview = null,
template = null;
document.getElementById('info').addEventListener('tap', function() {
if (subWebview == null) {
//获取共用父窗体
template = plus.webview.getWebviewById("default-main");
}
if(template){
subWebview = template.children()[0];
subWebview.loadURL('input.html');
//修改共用父模板的标题
mui.fire(template, 'updateHeader', {
title: 'input',
showMenu: false
});
template.show('slide-in-right', 150);
}
});
之前用这种打开的,但是后来发现从很遥远的地方(C之后的页面)直接返回到首页了。
后来,就用hello h5+的那种打开方式,效果还好,但是,没有跟H5+首页那样第二次打开就快一些,而是每次打开都会出现等待框。
烟雨江南 (作者) - 随便来
<li onclick="clicked(this.id)" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" id="a.html">
<a>
<span class="mui-icon mui-icon-contact"></span>
<div class="mui-media-body">档案</div>
</a>
</li>
<script type="text/javascript" charset="utf-8">
//取消浏览器的所有事件,使得active的样式在手机上正常生效
document.addEventListener('touchstart', function() {
return false;
}, true);
// 禁止选择
document.oncontextmenu = function() {
return false;
};
// H5 plus事件处理
var as = 'slide-in-right',
at = 200; // 默认动画时间
function plusReady() {
// 隐藏滚动条
plus.webview.currentWebview().setStyle({
scrollIndicator: 'none'
});
// Android处理返回键
plus.key.addEventListener('backbutton', function() {
if (confirm('确认退出?')) {
plus.runtime.quit();
}
}, false);
compatibleAdjust();
}
if (window.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady, false);
}
// DOMContentLoaded事件处理
var _domReady = false;
document.addEventListener('DOMContentLoaded', function() {
_domReady = true;
compatibleAdjust();
}, false);
// 兼容性样式调整
var _adjust = false;
function compatibleAdjust() {
if (_adjust || !window.plus || !_domReady) {
return;
}
_adjust = true;
// iOS平台使用div的滚动条
if ('iOS' == plus.os.name) {
as = 'pop-in';
at = 300;
document.getElementById('content').className = 'scontent';
}
// 预创建二级窗口
preateWebviews();
// 关闭启动界面
setTimeout(function() {
plus.navigator.closeSplashscreen();
}, 500);
}
// 处理点击事件
var _openw = null;
function clicked(id) {
if (_openw) {
return;
}
_openw = preate[id];
if (_openw) {
if (_openw.showded) {
_openw.show(as, at);
} else {
_openw.show(as, at);
_openw.showded = true;
}
_openw = null;
} else {
var wa = plus.nativeUI.showWaiting();
_openw = plus.webview.create(id, id, {
scrollIndicator: 'none',
scalable: false,
popGesture: 'hide'
}, {
preate: true
});
preate[id] = _openw;
_openw.addEventListener('loaded', function() { //叶面加载完成后才显示
// setTimeout(function(){//延后显示可避免低端机上动画时白屏
wa.close();
_openw.show(as, at);
_openw.showded = true;
_openw = null;
// },200);
}, false);
_openw.addEventListener('close', function() { //页面关闭后可再次打开
_openw = null;
preate[id] && (preate[id] = null); //兼容窗口的关闭
}, false);
}
}
// 预创建二级页面
var preate = {};
function preateWebviews() {
preateWebivew('plus/webview.html');
var plist = document.getElementById('plist').children;
// 由于启动是预创建过多Webview窗口会消耗较长的时间,所以这里限制仅创建5个
for (var i = 0; i < plist.length && i < 2; i++) {
var id = plist[i].id;
id && (id.length > 0) && preateWebivew(id);
}
}
function preateWebivew(id) {
if (!preate[id]) {
var w = plus.webview.create(id, id, {
scrollIndicator: 'none',
scalable: false,
popGesture: 'hide'
}, {
preate: true
});
preate[id] = w;
w.addEventListener('close', function() { //页面关闭后可再次打开
_openw = null;
preate[id] && (preate[id] = null); //兼容窗口的关闭
}, false);
}
}
// 清除预创建页面(仅)
function preateClear() {
for (var p in preate) {
var w = preate[p];
if (w && w.showded && !w.isVisible()) {
w.close();
preate[p] = null;
}
}
}
</script>
为什么打开的时候,第一次的时候无等待打开,第二次之后的点击都需要等待呢?hello H5+官方的却可以第二次点击无等待!我是不是哪里处理漏掉了?都是一样的代码呀(JS),