做webAPP遇到几个问题，麻烦大神帮忙看下怎么解决

分类：MUI

返回刷新返回按键

APP主页是有4个底部选项卡，每个选项卡跳转到4个子页面
每个子页面默认是打开外部网页比如百度。并且带头部返回键
现在遇到的问题有以下几个
1、子页面点击到下一个页面后安卓返回键不会返回上一页，提示再点一次退出。写的头部返回按钮可以返回。

2、打开外部网站怎么显示进度条

3、个别网站点击顶部返回按钮会自动刷新页面，不会回到之前已浏览的地方

以下是子页面代码。首页就写了个底部选项卡首页的代码在下方


<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <link rel="stylesheet" type="text/css" href="css/style.css"/>  
        <script src="js/mui.min.js"></script>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav heaber-bg">  
                <button type="button" class="mui-btn mui-btn-link" id="go_back">  
                    <span class="mui-icon mui-icon-back"></span>  
                                          <a>返回</a>  
                </button>  
            <h1 class="mui-title">创客优选</h1>  
        </header>  
        <div class="mui-content">  
             <script type="text/javascript" src="js/castapp.js" ></script>  
          <script type="text/javascript">  
            mui.init();  
            mui.plusReady(function() {  
                var self = plus.webview.currentWebview();  
                var youhuixWV = plus.webview.create("http://www.youhuix.com", "youhuix", {  
                    top: "44px",  
                    bottom: 0  
                  });  
                self.append(youhuixWV);  
                /**  
                 * 重写mui.back()方法  
                 * http://dev.dcloud.net.cn/mui/window/#closewindow  
                 */  
                /**  
                 * 监听子窗口对象是否可后退  
                 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.canBack  
                 */  
                document.getElementById("go_back").addEventListener("tap", function() {  
                    youhuixWV.canBack(function(event) {  
                        var canBack = event.canBack;  
                        if(canBack) {  
                            youhuixWV.back();  
                        } else {  
                            alert("到头了，不能后退了！");  
                        }  
                    });  
                });  

            });  

        </script>  

       </div>  
    </body>  

</html>

首页代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <link rel="stylesheet" type="text/css" href="css/style.css"/>  
    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
</head>  
<body>  
    <div class="mui-content">  
      <nav class="mui-bar mui-bar-tab">  
           <a id="defaultTab" class="mui-tab-item mui-active" href="sy.html">  
            <span class="mui-icon mui-icon-home"></span>  
            <span class="mui-tab-label">首页</span>  
           </a>  
           <a class="mui-tab-item" href="sj.html">  
            <span class="mui-icon mui-icon-search"></span>  
            <span class="mui-tab-label">搜卷</span>  
           </a>  
           <a class="mui-tab-item" href="9by.html">  
            <span class="mui-icon iconfont icon-9"></span>  
            <span class="mui-tab-label">9.9包邮</span>  
           </a>  
           <a class="mui-tab-item" href="sx.html">  
            <span class="mui-icon iconfont icon-jinrishangxin"></span>  
            <span class="mui-tab-label">每日上新</span>  
           </a>  
           <a class="mui-tab-item" href="gywm.html">  
            <span class="mui-icon iconfont icon-guanyu"></span>  
            <span class="mui-tab-label">关于我们</span>  
           </a>  
        </nav>  
    </div>  
    <!--  
        第一步引入castapp.js  
        第二步写js  
        第三步ca.init();初始化  
    -->  
    <!--  
        第一步引入castapp.js  
    -->  
    <script type="text/javascript" src="js/castapp.js" ></script>  
    <!--  
        第二步写js  
        第三步ca.init();初始化  
    -->  
    <script type="text/javascript">  
        ca.init();  
        var pathArray = ['sy.html','sj.html','9by.html','sx.html','gywm.html'];  
        castapp.tabBar(pathArray);  
    </script>  

</body>  
</html>

下方是整个APPrar压缩包

创客优选正式版APP.rar

2017-07-22 13:51 负责人:无分享

1 个回复

王者地带 - 5+混合APP开发教程网 | http://www.html5-app.com | 咨询QQ: 2564034335

//其实你要的是模拟浏览器的，后退功能，可以参考下，打开内页，可以按物理返回键进行返回上一页操作  

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  
    <script type="text/javascript">  
         mui.init();  
         var embed=null;  
         var pathArray;  
         mui.plusReady(function()  
         {  
             pathArray = ['http://www.youhuix.com/','sj.html','9by.html','sx.html','gywm.html'];  
             embed=plus.webview.create(pathArray[0],'bar',{statusbar: {background:'#000000'}});  
             plus.webview.currentWebview().append(embed);  

         });  

        //两次点击返回  
        var first = null;    
        mui.back = function()  
        {  
               console.log(embed.getURL());  
            if(pathArray[0]==embed.getURL())  
            {     
                //首次按键  
            if (!first)   
            {  
                mui.toast("再按一次退出");  
                first="out";  
                setTimeout(function(){  
                    first = null;  
                },3000);  
            }  
            else  
            {  
                if(first=="out")   
                {   
                    first=null;  
                    plus.runtime.quit();  

                }  
            }  

            return;   
            }  

            embed.back();  

        }  

      </script>

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

您好，感谢您的回答！请问您贴出的代码是子页面的代码吗

2017-07-23 12:45
4***@qq.com (作者)

这个代码放子页面，加上头部 header 无法显示header

2017-07-23 15:10

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

做webAPP遇到几个问题，麻烦大神帮忙看下怎么解决

1 个回复

公告

相关问题

做webAPP遇到几个问题，麻烦大神帮忙看下怎么解决

与内容相关的链接

1 个回复

公告

相关问题