webview实现的底部选项卡，安卓按返回键，子页面白屏

分类：MUI

底部选项卡

详细问题描述
我用了一个main.html 和五个子页面，来实现底部webview无刷新切换。其中有两个子页面，在点了返回键的时候子页面就白屏了。另外三个是正常的，这就让我很郁闷了，实在是找不到问题所在。

重现步骤
[步骤]
正常界面：

[结果]
返回白屏的页面：

[期望]
首页正常页面：

首页返回也正常，不会白屏

运行环境
[系统版本]
手机：魅蓝note3
Android版本：5.1
版本号：Flyme 6.1.0.0A

[浏览器版本]
chrome浏览器没找到版本。

[IDE版本]
HBuilder
8.8.4.201709282021

[mui版本]
不知道怎么看mui版本。
附件
[代码片段]
点上面的代码，没有出现包住代码的东西，我代码一会补在下面的回复上。

[安装包]
我简化了一下项目，附件可以下载后解压用hbuild打开。

联系方式
[QQ]
2548332563

demo.zip

2017-11-03 10:29 负责人:无分享

3 个回复

5***@qq.com (作者) - 这家伙很懒，什么都没有留下~

补上我main.html 页面的代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>红鱼</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <link rel="stylesheet" href="css/mui.min.css">  
    <link rel="stylesheet" href="css/home.css">  
    <link rel="stylesheet" href="css/app.css">  
    <link rel="stylesheet" type="text/css" href="css/icons-extra.css" />  
    <style>  
        html,body,.mui-bar {  
            background-color: #FFF;  
        }  
        a{color:#000;}  
        .mui-bar-tab .mui-tab-item.mui-active{  
            color: #ff3366;  
        }  
    </style>  
</head>  
<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class=" mui-icon mui-icon-search mui-pull-left"></a>  
        <h1 id="title" class="mui-title">首页</h1>  
        <span id="left-icon" class="mui-icon mui-icon-gear-filled mui-pull-right"></span>  
    </header>  
    <nav class="mui-bar mui-bar-tab">  
        <a id="defaultTab" class="mui-tab-item mui-active" href="index.html">  
            <span class="mui-icon mui-icon-home"></span>  
            <span class="mui-tab-label">首页</span>  
        </a>  
        <a class="mui-tab-item" href="cate.html">  
            <span class="mui-icon mui-icon-extra mui-icon-extra-class" style="font-size:20px;"></span>  
            <span class="mui-tab-label">分类</span>  
        </a>  
        <a class="mui-tab-item" href="yaoqing.html">  
            <span class="mui-icon mui-icon-upload" style="margin-bottom: 3px;"></span>  
            <span class="mui-tab-label">邀请</span>  
        </a>  
        <a class="mui-tab-item" href="shopcar.html">  
            <span class="mui-icon mui-icon-extra mui-icon-extra-cart" style="font-size:20px;"></span>  
            <span class="mui-tab-label">购物车</span>  
        </a>  
        <a class="mui-tab-item" href="me.html">  
            <span class="mui-icon mui-icon-extra mui-icon-extra-people" style="font-size:20px;"></span>  
            <span class="mui-tab-label">我的</span>  
        </a>  
    </nav>  
    <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>  
    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">   
        var main,menu,mask;  
        //mui初始化  
        mui.init({  
            swipeBack: false,  
            beforeback: back  
        });  

        function back() {  
//          menu.close('none');  
            return true;  
        }  
        // plusReady事件后，自动创建menu窗口；  
        mui.plusReady(function() {  

        });  
        /**  
         * 子页面选项卡  
         */  
        var subpages = ['index.html', 'cate.html', 'yaoqing.html', 'shopcar.html','me.html'];  
        var subpage_style = {  
            top: '45px',  
            bottom: '51px'  
        };  

        var aniShow = {};  
         //创建子页面，首个选项卡页面显示，其它均隐藏;  
        mui.plusReady(function(){  
            var self = plus.webview.currentWebview();  
            for (var i = 0; i < 5; i++) {  
                var temp = {};  
                var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
                if (i > 0) {  
                    sub.hide();  
                }else{  
                    temp[subpages[i]] = "true";  
                    mui.extend(aniShow,temp);  
                }  
                self.append(sub);  
            }  
        });  
         //当前激活选项  
        var activeTab = subpages[0];  
        var title = document.getElementById("title");  
         //选项卡点击事件  
        mui('.mui-bar-tab').on('tap', 'a', function(e) {  
            var targetTab = this.getAttribute('href');  
            if (targetTab == activeTab) {  
                return;  
            }  
            //更换标题  
            title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
            //显示目标选项卡  
            //若为iOS平台或非首次显示，则直接显示  
            if(mui.os.ios||aniShow[targetTab]){  
                plus.webview.show(targetTab);  
            }else{  
                //否则，使用fade-in动画，且保存变量  
                var temp = {};  
                temp[targetTab] = "true";  
                mui.extend(aniShow,temp);  
                plus.webview.show(targetTab,"fade-in",300);  
            }  
            //隐藏当前;  
            plus.webview.hide(activeTab);  
            //更改当前活跃的选项卡  
            activeTab = targetTab;  
        });  
        mui('.mui-bar-tab').on('tap', '#yaoqing', function(e) {  
            document.getElementById("yaoqing").src= 'images/che.png';  
        });  
         //自定义事件，模拟点击“首页选项卡”  
        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');  
            }  
        });  
    </script>  
    <script>  
        /*------------预加载设置单页面------------*/  
    var gourl = 'search.html';  
    var seturl = 'setpage.html';  

        mui.init({  
            preloadPages: [{//预加载目标页面  
                'url': gourl,  
                'id': gourl,  
            },{  
                'url': seturl,  
                'id': seturl,  
            }]  
        });  

        window.onload = function(){  
            var Page = null;  
            var setpage = null;  
            $('header').on('tap','a',function(){  
                if (!Page) {  
                    Page = plus.webview.getWebviewById(gourl);  
                }  
                mui.openWindow({ //目标页面  
                    id: gourl,  
                });  
            });  

            $('header').on('tap','#left-icon',function(){  
                if (!setpage) {  
                    setpage = plus.webview.getWebviewById(seturl);  
                    if(setpage){  
                        plus.webview.close(setpage,'none');  
                    }  
                }  
                mui.openWindow({ //目标页面  
                    url:seturl,  
                    id: seturl,  
                });  
            });  
        }  
    /*------------预加载设置单页面结束--------*/  
    </script>  
</body>  

</html>

5***@qq.com (作者) - 这家伙很懒，什么都没有留下~

自顶一下，还是没解决。。。

静候

你好，经过你的描述，应该是me页面监听了安卓的返回按键，导致页面退出，你可以加一行代码，根据你的demo测试，可以避免那种情况。

mui.init({  
        keyEventBind: {  
        backbutton: false,  //Boolean(默认true)关闭back按键监听  
        menubutton: true   //Boolean(默认true)关闭menu按键监听  
    }  
    });

5***@qq.com (作者)

原来是这样啊，好了，谢谢你

2017-11-03 15:29
LOL乌迪尔

确实可以。那么请问不用mui.init 的方法，用plus的方法怎么实现屏蔽 backbutton 和 menubutton?

2018-02-01 11:31

该问题目前已经被锁定, 无法添加新回复

webview实现的底部选项卡，安卓按返回键，子页面白屏

3 个回复

公告

相关问题

webview实现的底部选项卡，安卓按返回键，子页面白屏

与内容相关的链接

3 个回复

公告

相关问题