Html5+ 后退按钮出现白屏（webView.back会白屏）

分类：HTML5+

Webview HTML5 mui HBuilder

您好，打包装到 iPad 上去调试，A ->B 之后，第一次调用 webView.back 会显示白屏，页面切换使用的 webView.loadUrl ，代码如下：

var sub = plus.webview.create(_basePath + 'pages/canlucate/canlucate.html', 'subpage-web', {  
        left: '80px',  
        right: '0px',  
        top: '55px',  
        bottom: '0px',  
        popGesture: 'none',  
        scrollIndicator: 'none'  
    });  
    plus.webview.currentWebview().append(sub);  
    mui('.mui-bar ul').on('tap', 'li', function() {  
        var href = this.getAttribute('data-href');  
        if(sub.getURL() != href) {  
            sub.loadURL(_basePath + href);  
        } else {  
            sub.show();  
        }  
        switchMenu(href);  
    });  

    /**  
     * 注册页面切换事件   
     */  
    window.addEventListener('loadUrl', function(e) {  
        var url = e.detail.url;  
        if(sub.getURL() != url) {  
            sub.loadURL(_basePath + url);  
        } else {  
            sub.show();  
        }  
        switchMenu(url);  
    });  
    /**  
     * 注册页面回退事件   
     */  
    window.addEventListener('goBack', function(e) {  
        sub.canBack(function(e) {  
            if(e.canBack) {  
                sub.back();  
                switchMenu(sub.getURL());  
            }  
        });  
    });  

这里是页面JS  
//链接跳转  
var mainWebView;  
function goUrl(url,id,options){  
    if(url.startWith('http://') || url.startWith('https://')){  
        if(mui.os.plus){  
            plus.runtime.openURL(url);  
        }else{  
            mui.openWindow(url);  
        }  
        return;  
    }  
    if(url.indexOf('.html') == -1){ //不包含 .Html 后缀  
        if(url.lastIndexOf('?') != -1){//Url中包含有参数  
            url = url.substring(0,url.lastIndexOf('?')) + '.html'+url.substring(url.lastIndexOf('?'));  
        }else{ //Url 不包含参数  
            url += '.html';  
        }  
    }  
    if(!mainWebView){  
        mainWebView = plus.webview.currentWebview().parent();  
    }  
    mui.fire(mainWebView,'loadUrl',{url: url});  

}  

返回  
/**  
 * 返回上一页  
 */  
function goBack(){  
    mui.back();  
}  
mui.back = function(){  
    if(!mainWebView){  
        mainWebView = plus.webview.currentWebview().parent();  
    }  
    mui.fire(mainWebView,'goBack');  
}

附件是测试Demo，烦请看下，谢谢，测试流程，左侧导航栏客户--》客户列表--》点击某一个客户--》点击左上角返回按钮

2016-09-01 09:56 负责人:无分享

4 个回复

啸天 (作者)

提供了Demo给官方人员，结果没回复了，就一句我逻辑有问题，又不说哪里问题，再问就不理了，算了

赵梦欢 - 专注前端，乐于分享！

和你说过不建议你把所有页面的mui.back重写，特别是重写了还要作为公用函数放在一个文件里面多次调用（毕竟每个页面的处理逻辑不一样），且代码中mainWebView是全局变量，多次通过plus.webview.currentWebview().parent();进行赋值，追踪一下plus.webview.currentWebview().parent()就能很轻松的发现存在undefined的情况。在一开始就和你说过，不要这样做，那么你非得这么做，我们总不能帮你去调试bug吧，如果是框架的问题，给个纯洁的工程，方便我们重现你所说的问题，如果不是，我们也不可能去把你写的代码仔细去研究，然后帮你一个个的去解决bug。做开发谁没有遇到问题，大家不都是自己去调试，不断优化自己的代码，希望自己潜下心去好好研究一下这种的逻辑关系。

啸天 (作者)

追踪了 mainWebView 没有存在 undefined 的情况，而且 web.back 只有第一次会出现白屏，第二次以后就没有出现了，而且 canBack 返回了1，调用 sub.back 就白屏了，重写back 的js 只会在每个页面调用，没有在一个文件里多次调用

2016-09-06 20:40
啸天 (作者)

我已经用其他方法处理了，我不知道是哪里的问题，手动处理了

2016-09-06 20:40
赵梦欢

回复啸天:我的意思mui.back这种最好不要作为公用的js文件在多个文件里面引用，而且mainWebView的指向在你工程里面也很不明确。

2016-09-06 20:42
赵梦欢

回复啸天:另外既然你自己都不知道问题出在哪里，就为啥一定觉得是webview.back的问题呢，做开发遇到问题不要靠猜测，自己最好把代码整理清晰，不然工程复杂了，很容易造成冲突。

2016-09-06 20:44
啸天 (作者)

我单独写 webview跳转两个页面也白屏，就一个A.html,一个B.htm 一样会白屏，之前发过测试Demo，后面的Demo就没发，没有什么逻辑，实在找不到问题出在哪，要是猜测我就不贴工程代码了，直接说你框架有问题了

2016-09-06 20:49
啸天 (作者)

现在我控制了第一次的 back ，就不会白屏了，第一次back的时候会白屏，重新loadUrl一次就不会白屏了，现在就这么弄了

2016-09-06 20:50
赵梦欢

回复啸天: 有两个不同的应用场景需要搞清楚：第一种是单webview内的页面跳转回退，可以通过webview back方法，类似js中的history方法，这个时候最好监听系统返回按键事件；第二种是多个webview，打开webview和关闭页面，mui封装了mui.back实现，根据不同的情况做出不同的处理办法,http://dev.dcloud.net.cn/mui/window/#closewindow

2016-09-06 20:59
c***@qq.com

回复赵梦欢:现在就是第一种方式，在iOS里面白屏了http://ask.dcloud.net.cn/question/44759

2017-06-26 23:00