啸天
啸天
  • 发布:2016-09-01 09:56
  • 更新:2019-08-15 14:41
  • 阅读:4969

Html5+ 后退按钮出现白屏(webView.back会白屏)

分类:HTML5+

您好,打包装到 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 负责人:无 分享
已邀请:
啸天

啸天 (作者)

提供了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

c***@qq.com

c***@qq.com

iOS也碰到同样的问题 主要是5+SDK不开源。开源的话找问题很容易

叶南淮

叶南淮

您好 所以最后怎么解决的呢 我也遇到了这个问题 只在安卓上出现

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