碧霜寒冰
碧霜寒冰
  • 发布:2018-12-29 11:19
  • 更新:2019-01-02 17:32
  • 阅读:1920

【报Bug】Webview 在后台创建页面Webview高度异常的问题

分类:5+ SDK

[内容]
20181226版本Android版SDK,APP切后台后创建新的Webview ,切回前台后新建Webview视窗高度显示异常,具体高度多少不同页面存在差异,可能为动态页面的初始页面高度。并且此时调用Webview.reload()方法,页面仍旧显示异常。

// 新建Webview的Style  
var commonWebviewStyle = {  
    render: "always",  
    kernel: "WKWebview", // webview内核  
    progress: { // 加载进度条  
        color: "#03a9f4"  
    },  
    userSelect: false, // 是否可以长按选择页面文本,  
        statusColor: "#2196f3",  
        animationTypeShow: "pop-in"  
}

除此之外,对页面添加resume事件后检测Webview.checkRenderedContent({},successCallback, errorCallback),检测回调successCallback, rendered 返回 true,页面显示异常。
这个在20181212版本中相同页面的调用Webview.checkRenderedContent后回调ErrorCallback

document.addEventListener("plusready", function() {  
    // 切到后台后唤醒,检查当前页面是否渲染成功,不成功重新渲染  
    document.addEventListener("resume", function() {  
        var currentWebView = plus.webview.currentWebview();  
        currentWebView.checkRenderedContent({}, function(e){  
            console.log("rendered:" + e.rendered);  
            if (!e.rendered) {  
                webviewRerender();  
            }  
        }, function(e){  
            webviewRerender();  
        });  
    });  
)};  
function webviewRerender(webview) {  
    try {  
        if (!webview) {  
            webview = plus.webview.currentWebview();  
        }  
        // 必须先隐藏,再显示,然后reload,否则无效  
        webview.hide();  
        webview.show();  
        webview.reload();  
    }  catch(e) {}  
}

重现步骤
[步骤] 主Webview,延时创建新Webview,延时期间,将APP切到后台,之后再切回前台
[结果] 新建Webview显示异常,checkRenderedContent 回调successCallback 并且rendered 返回true
[期望] 新建Webview正常显示,或checkRenderedContent 回调errorCallback,或者rendered 返回false
[如果语言难以表述清晰,可以拍一个视频或截图,有图有真相]
以下为已打开baidu页面的例子:
前台打开,正常显示:


后台打开,显示不完整:

IDE运行环境说明
[5+SDK] 20181226
[IDE版本号]Android studio 3.0.1
[windows版本号]win7 旗舰版
App运行环境说明
[Android版本号]Android 8.0.0
[手机型号]小米6, 小米6X,小米8SE

2018-12-29 11:19 负责人:无 分享
已邀请:
DCloud_Android_ST

DCloud_Android_ST

提供一个测试demo。 附件!!!

  • 碧霜寒冰 (作者)

    demo已发,请快速定位问题进行修复

    2019-01-03 09:35

碧霜寒冰

碧霜寒冰 (作者)

@DCloud_Android_ST
用的就是20181226随SDK附带的HBuilder-Hello项目的index.html页面,在原来的pluseReady方法末尾添加延时创建新Webview的方法。注意确保延时打开的代码是在APP切到后台后执行,后台运行创建问题复现率100%,创建的时候APP在前台,就没有这样的问题。

// H5 plus事件处理  
function plusReady(){  
    // Android处理返回键  
    plus.key.addEventListener('backbutton',function(){  
        ('iOS'==plus.os.name)?plus.nativeUI.confirm('确认退出?', function(e){  
            if(e.index>0){  
                plus.runtime.quit();  
            }  
        }, 'HelloH5', ['取消','确定']):(confirm('确认退出?')&&plus.runtime.quit());  
    },false);  
    // 关闭启动界面  
    plus.navigator.setStatusBarBackground('#D74B28');  
    setTimeout(function(){  
        plus.navigator.closeSplashscreen();  
    },200);  

        // 切后台后打开新的webview,延时时间自己调整,只要确保执行的时候App是在后台运行的  
    setTimeout(function() {  
        behindOpen();  
    }, 10000);  
}

创建新Webview的方法

function behindOpen() {  
    // 新建Webview的Style  
    var webviewAppendJsFiles = [];  
    var overrideResourceOptions =[];  
    var commonWebveiwStyle = {  
        render: "always",  
        kernel: "WKWebview", // webview内核  
        progress: { // 加载进度条  
            color: "#03a9f4"  
        },  
        userSelect: false, // 是否可以长按选择页面文本,  
            statusColor: "#2196f3",  
            animationTypeShow: "pop-in"  
    }  
    var externalSrc = "http://www.baidu.com/sdsads";  
    var statusColor = "#2196f3";  
    var animationTypeShow = "fade-in";  
    var backgroundColor = "transparent";  
    var mask = "rgba(0,0,0,0.4)";  
    var contentAdjust = true;  
    if ('iOS'==plus.os.name) {  
        statusColor = "#f7f7f8";  
        backgroundColor = "#f7f7f8";  
        animationTypeShow = "pop-in";  
        mask = "none";  
        contentAdjust = false;  
    }  
    // iOS 需要制定kernel内核为WKWebview  
    var externalWebviewStyle = Object.assign({}, commonWebveiwStyle, {  
        mask: mask, // 遮罩层  
        background: backgroundColor, // 窗体背景  
        statusbar: { // 状态栏样式  
            background: statusColor  
        },  
        // 无效属性// contentAdjust: contentAdjust, // iOS11及以上版本,沉浸式状态栏存在WebView顶部状态栏灰条的问题,增加contentAdjust:false 可以取消自动调整(true:内容区域避免和安全区域重叠,主要是为刘海屏作出的调整)  
    });  
    var externalWebview = plus.webview.create(externalSrc, "externalWebview", externalWebviewStyle);  
    // 向webview添加本地JS文件,按先后顺序执行  
    for(var i in webviewAppendJsFiles) {  
        var appendJsFile = webviewAppendJsFiles[i];  
        externalWebview.appendJsFile(appendJsFile);  
    }  
    externalWebview.overrideResourceRequest(overrideResourceOptions);  
    // 监听页面加载完成  
    externalWebview.addEventListener('loaded', function(e){  
        plus.webview.getTopWebview().setStyle({  
            mask: 'none'  
        });  
        plus.nativeUI.closeWaiting();  
    }, false);  
    externalWebview.show(animationTypeShow);  
    plus.nativeUI.showWaiting(waitingTitle, waitingOptions);  
}
  • DCloud_Android_ST

    感觉像是你跳转的网络地址没有适配才造成的原因 你可以把externalSrc的值域 改为http://www.baidu.com

    2019-01-03 11:28

  • 碧霜寒冰 (作者)

    回复 DCloud_Android_ST:我这是测试链接,我问题中已经描述了,对于动态内容高度的页面,后台打开Webview,打开的webview高度才会显示异常,这个跟页面适不适配没关系。你APP置于前台打开和置于后台打开相同页面,要达到的效果应该是一样才对吧。

    2019-01-03 14:00

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