txfyteen
txfyteen
  • 发布:2015-01-29 14:32
  • 更新:2019-07-30 18:00
  • 阅读:15031

TabBar中使用WebView模式子页面中返回主页面时遇到的问题

分类:MUI

在TabBar中使用WebView模式子页面中,有这样的一个流程,首页是index.html页面,能实现四个tab之间的切换


此时,tabbar已经不再显示了,然后再页面A里面再mui.open打开页面B,页面B有一个按钮,点击返回主页,我用的也是mui.openWindow()打开index.html,结果返回到我的index.html时候,无论我点击哪一个tab时候只显示第一个页面,这是什么原因呢?

6 关注 分享
码农格叽格叽 shiyuankao wj Liosixer Luyc 1***@qq.com

要回复文章请先登录注册

6***@qq.com

6***@qq.com

var main = plus.webview.getWebviewById("main");
// main 为 null ,
我查看文档之后我是这样做的:
var main = plus.webview.getWebviewById(plus.runtime.appid);
2019-07-30 18:00
1***@163.com

1***@163.com

回复 一个大老鼠 :
非常感谢!
2018-05-10 11:14
1***@qq.com

1***@qq.com

上面的做法,我试了,不好用。
我的做法是在页面B中添加js代码:
document.getElementById("login-cancel").addEventListener('tap',function () {
var mainPage = plus.webview.currentWebview().opener().parent();
mainPage.show();
});

然后点击页面B上的返回按钮,就能返回到页面A了。
2016-07-22 15:47
一个大老鼠

一个大老鼠

我也遇到过这个问题,你不应该用mui.openWindow()打开index.html,而是应该用主窗口里面的事件,进行切换,看tab-webview-main.html的这段代码:
----------------------------------------------------
//自定义事件,模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("defaultTab");
//模拟首页点击
mui.trigger(defaultTab, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
-------------------------------------------
其他页面如果要切换到首页的话,应该触发首页的gohome事件:
document.getElementById("about").addEventListener('tap',function () {
//获得主页面的webview
var main = plus.webview.currentWebview().parent();
//触发主页面的gohome事件
mui.fire(main,'gohome');
});
--------------------------------------------
如果你只需要切换到首页tabbar的第一个页面的话,你看到这里就够了;
---------------------华丽的分割线------------------------------------
但是我的需求是随时切换到首页4个tabbar的任意一个,于是我对这个事件做了一些改造:现在把他贴出来,欢迎指正学习:
首先在tab-webview-main.html中注册一个自定义事件
-------------------------------------------------
//自定义事件,模拟点击“某一个选项卡”,从而实现首页选项卡切换
document.addEventListener('tabSwith', function(event) {
//获得参数
var detail=event.detail;
var id=detail.id;
var gotab = document.getElementById(id);

//模拟首页点击
mui.trigger(gotab, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if (gotab !== current) {
current.classList.remove('mui-active');
gotab.classList.add('mui-active');
}
});
-----------------------------------------------------
然后在全局的js文件common.js中,添加一个方法,这个方法是扩展到w上的(w表示window)
/**
* 跳转到首页
* 参数默认为0(首页tab bar 的第一个子页面)
* */
w.toIndex = function(i) {
//设置默认值为0
var i = i || 0;
var idArr=["defaultTab","goInvest","goMy","goMore"];

var main = plus.webview.getWebviewById("main"); //这里可能返回空;详见官方文档说明
//显示首页
console.log("应用首页,并且切换到对应的选项卡");
mui.fire(main,'tabSwith',{id:idArr[i]});
main.show();
};

然后我就可以在任何页面(前提是引入了全局的common.js文件),直接调用toIndex(0);(这里的参数是idArr数组中对应的下表,根据ID 进行跳转),然后实现华丽的跳转到首页的任意一个tabbar了,哈哈
-------------------------------------------------------
这里(ˇˍˇ) 向大神请教一个问题,就是这样切换去的tabbar,无法进行时时刷新,应为webview是从缓存中拿出来的,其中的数据不能实时更新,请问如何解决这个问题??
2015-06-24 09:37
wj

wj

也遇到同样的问题,求解决方案,
2015-06-09 18:09
逃逸的风

逃逸的风

mui.openWindow()打开index.html 一直浮在最上层 不用这个打开

你应该 是点击B 通知 tabbar所在的主窗口里的一个事件 才做切换
详见hellomui里的列子:

tab-webview-main.html
2015-06-02 10:09
shiyuankao

shiyuankao

也遇到同样的问题,求解决方案,这个问题解决不了,就只能用原生去开发了
2015-05-31 19:31
三石头

三石头

遇到同样问题,请问解决了吗?是什么原因导致的?
2015-05-07 15:04
gojaja

gojaja

页面被遮挡了
2015-04-01 17:28
请忘记我

请忘记我

遇到同样问题,请问解决了吗?是什么原因导致的?
2015-03-12 15:25