如何打开一个新页面的同时隐藏老页面。

同问～

注意：如下讨论针对的是老版本，自从HBuilder 4.8.0版本之后，无需再手动隐藏老页面，5+ runtime会自动隐藏不显示的页面；

假设如下场景：从a.html打开新页面b.html，此时不建议直接关闭a页面，因为正常逻辑来说，关闭b页面时，还需显示a页面，因此为节省系统资源，仅将a页面隐藏即可；
实现代码如下：
从a页面打开b页面：

//打开b页面  
mui.openWindow({  
    url:'b.html',  
    id:'b.html'  
});  
//等b页面显示动画结束后，隐藏a页面；如下示例中的300毫秒，可根据b页面真实显示动画时间调整  
setTimeout(function(){  
    mui.currentWebview.hide('none');  
},300);

b页面关闭，显示a页面

var oldback = mui.back;  
mui.back = function(){  
    //恢复a页面的显示状态；  
    mui.currentWebview.opener().show('none');  
    //继续执行b页面原有的返回逻辑  
    oldback();  
}

llyzlc (作者)

mui.currentWebview.hide('none');和mui.currentWebview.opener().show('none');中为什么不是a.html而是none

DCloud_UNI_CHB

mui.currentWebview已经是当前webivew了，'none'代表的是动画参数，即无动画。

llyzlc (作者)

a.html→b.html→c.html→d.html→e.html→b.html。按照上面说法。在b.html按返回键直接退出程序了，而没在a.html。

2014-12-11 16:15
llyzlc (作者)

而且a.html→b.html后，在b.html按返回键也是直接退出程序

2014-12-11 16:16
DCloud_UNI_CHB

e.html为什么会直接跳转到b?那b.html关闭时，应该显示a.html还是e.html？

2014-12-11 17:53

DCloud_UNI_CHB

我写了个测试工程，应该是没问题的，实现从a-->b-->c的跳转，打开新窗口时自动隐藏老窗口，可直接连续返回，到a页面连按两下backbutton键，可退出应用。

代码已提交到Github上，你可以参考，地址：ask-1609

1***@qq.com

我在b页面中点击“打开C页面”，在C页面点击左上角的箭头，不断来回点，APP就直接退出了，请问这是什么情况啊？

2017-04-13 16:32

jh201320

要是有子页面的怎么实现呢，头部怎么处理

DCloud_UNI_CHB

子页面不处理，让父页面统一处理

2014-12-12 17:46
jh201320

我的链接在子页面哦，怎么在父级处理

2014-12-12 17:50

jh201320

我在子页面点击链接打开个新页面，怎么实现隐藏这个子页面和父页面？

DCloud_UNI_CHB

@jh201320
稍作修改即可，若没有父页面，自己隐藏；若有父页面（自己就是子页面），则父页面隐藏：

//打开b页面  
mui.openWindow({  
    url:'b.html',  
    id:'b.html'  
});  
//等b页面显示动画结束后，隐藏a页面；如下示例中的300毫秒，可根据b页面真实显示动画时间调整  
setTimeout(function(){  
     //默认获得当前webview  
    var page = mui.currentWebview;  
    //若有父页面，则转化为父页面；  
    if(page.parent()){  
        page = page.parent();  
    }  
    //隐藏  
    page.hide('none');  
},300);

jh201320

哦，谢了

2014-12-13 12:33
jh201320

在打开的新页面返回，直接用

var oldback = mui.back;

mui.back = function(){

//恢复a页面的显示状态；

mui.currentWebview.opener().show('none');

//继续执行b页面原有的返回逻辑

oldback();

}就可以实现了吗？

2014-12-13 12:54

DCloud_UNI_CHB

@jh201320 若存在子页面，返回代码也需要稍作修改，如下：

var oldback = mui.back;  
mui.back = function(){  
    //获得上一级页面对象  
    var opener = mui.currentWebview.opener();  
    //判断是否存在父页面；  
    if(opener.parent()){  
        opener = opener.parent();  
    }  
    //恢复a页面的显示状态；  
    opener.show('none');  
    //继续执行b页面原有的返回逻辑  
    oldback();  
}

jh201320

a页面

<!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"/>  
    <style>  
        #list{margin-top: -1px;}  
        #list h4{margin: 0; padding: 0;}  
    </style>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
</head>  
<body>  
    <div class="mui-content">  
        <ul class="mui-table-view" id="list">  
            <li class="mui-table-view-cell mui-media">  
                <a>  
                    <img class="mui-media-object mui-pull-left" src="images/shuijiao.jpg">  
                    <div class="mui-media-body">  
                        <h4>幸福</h4>  
                        <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media">  
                <a>  
                    <img class="mui-media-object mui-pull-left" src="images/muwu.jpg">  
                    <div class="mui-media-body">  
                        <h4>木屋</h4>  
                        <p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media">  
                <a>  
                    <img class="mui-media-object mui-pull-left" src="images/cbd.jpg">  
                    <div class="mui-media-body">  
                        <h4>CBD</h4>  
                        <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>  
                    </div>  
                </a>  
            </li>  
            <li class="mui-table-view-cell mui-media">  
                <a>  
                    <img class="mui-media-object mui-pull-left" src="images/yuantiao.jpg">  
                    <div class="mui-media-body">  
                        <h4>远眺</h4>  
                        <p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>  
                    </div>  
                </a>  
            </li>  
        </ul>  
    </div>  
    <script>  
        mui('#list').on('tap','a',function() {  
            var title = this.getElementsByTagName('h4')[0].innerHTML;  
            mui.openWindow({  
                url:'template_Header.html',   
                id:'template_Header',  
                extras:{  
                    name:title,  
                    strurl:'content_con.html'  
                }  
            });  
            //等b页面显示动画结束后，隐藏a页面；如下示例中的300毫秒，可根据b页面真实显示动画时间调整  
            setTimeout(function(){  
                 //默认获得当前webview  
                var page = mui.currentWebview;  
                //若有父页面，则转化为父页面；  
                if(page.parent()){  
                    page = page.parent();  
                }  
                //隐藏  
                page.hide('none');  
            },300);  
        });  

        var oldback = mui.back;  
        mui.back = function(){  
            //获得上一级页面对象  
            var opener = mui.currentWebview.opener();  
            //判断是否存在父页面；  
            if(opener.parent()){  
                opener = opener.parent();  
            }  
            //恢复a页面的显示状态；  
            opener.show('none');  
            //继续执行b页面原有的返回逻辑  
            oldback();  
        }  
    </script>  
</body>  
</html>

公共的父页面
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" id="title"></h1>
</header>
<script type="text/javascript" charset="utf-8">
mui.plusReady(function(){
var self = plus.webview.currentWebview();
var name = self.name;

        var title = document.getElementById('title');  
        title.innerHTML = name;  
        var strurl = self.strurl;  
        mui.init({  
            subpages:[{  
                url:strurl,  
                id:strurl,  
                styles:{  
                    top:'48px',  
                    bottom:'0px'  
                }  
            }]  
        });  
    });  
</script>

</body>

b页面
<body>
<div class="mui-content">
5666666666666689999999
</div>
<script>

    var oldback = mui.back;  
    mui.back = function(){  
        //获得上一级页面对象  
        var opener = mui.currentWebview.opener();  
        //判断是否存在父页面；  
        if(opener.parent()){  
            opener = opener.parent();  
        }  
        //恢复a页面的显示状态；  
        opener.show('none');  

        //继续执行b页面原有的返回逻辑  
        oldback();  
        setTimeout(function(){  
             //默认获得当前webview  
            var page = mui.currentWebview;  
            //若有父页面，则转化为父页面；  
            if(page.parent()){  
                page = page.parent();  
            }  
            //隐藏  
            page.hide('none');  
        },300);  
    }  
</script>

</body>

返回好像不能显示之前的页面，我是新手，求老师指点一下，谢谢

jh201320

子页面返回代码，

var oldback = mui.back;  
mui.back = function(){  
    //获得上一级页面对象  
    var opener = mui.currentWebview.opener();  
    //判断是否存在父页面；  
    if(opener.parent()){  
        opener = opener.parent();  
    }  
    //恢复a页面的显示状态；  
    opener.show('none');  
    //继续执行b页面原有的返回逻辑  
    oldback();  
}

opener.parent()是undefined的，前一页面也是有父子页面的，为什么

如何打开一个新页面的同时隐藏老页面。

11 个回复

公告

相关问题

如何打开一个新页面的同时隐藏老页面。

与内容相关的链接

11 个回复

公告

相关问题