解决webview调用 goBack() 返回上一页自动刷新闪白的情况

本文介绍了解决Webview在返回前一个页面时出现闪白现象的方法,通过修改Webview的缓存模式为LOAD_NO_CACHE,避免了资源的重复加载。同时提供了解决方案的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题是:重写了onKeyDown()方法使其goBack(),但是遇到的问题是,每次进入webview再次返回原始页面的时候,中间会有一个闪白的出现。效果如下:


试了好多网上的方法,发现都是扯淡。委屈

后来意识到,webView 有缓存存在着缓存模式,怎么用不同的缓存模式呢?

//设置缓存模式
webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
需要把模式改成LOAD_NO_CACHE!!
但是每次都得重新请求很费资源,于是可以放在onKeyDown()里重新写一个LOAD_NO_CACHE,只在返回时调用无缓存模式
这样就可以在返回前一个页面的时候不刷新出现闪白了
代码:
private void initView() {
    webview = (WebView) findViewById(R.id.faq_wv);
    webview.loadUrl(url);
    webview.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    });
    WebSettings settings = webview.getSettings();
    settings.setJavaScriptEnabled(true);
    settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}

/* 改写物理按键返回的逻辑 */

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK && webview.canGoBack()) {
        // 返回上一页面
         webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        webview.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

对比结果:




### UniApp 中返回一页不刷新的解决方案 #### 方法一:手动触发页面刷新逻辑 对于H5端,当用户点击返回按钮时,可以通过监听`onShow`生命周期钩子来实现页面自动刷新。每当页面显示时都会执行一次数据获取操作。 ```javascript export default { onShow() { this.loadData(); }, methods: { loadData() { // 模拟异步请求接口获取最新数据并更新视图 setTimeout(() => { console.log('模拟加载新数据'); }, 1000); } } } ``` 这种方法适用于希望每次回到页面都能看到最新的服务器状态的情况[^1]。 #### 方法二:利用缓存机制控制是否刷新 可以考虑引入一个全局变量或本地存储作为标志位,用于判断是否需要重新加载数据: ```javascript let needRefresh = true; function goBackWithCondition(refreshFlag) { needRefresh = refreshFlag; const pages = getCurrentPages(); if (pages && pages.length > 1) { uni.navigateBack({ delta: 1, }); } else { history.back(); } } // 在目标页面的 onLoad 或者 onShow 生命周期内加入如下代码: if (needRefresh) { this.loadData(); } ``` 此方式允许开发者灵活决定何时以及如何刷新页面内容[^3]。 #### 方法三:使用 `redirectTo` 替代默认回退行为 针对某些特定场景下(如多级嵌套页面),可采用`redirectTo`代替普通的`navigateBack()`方法。这种方式会在跳转前销毁当前页实例,从而强制刷新目的页面。 ```javascript uni.redirectTo({ url: '/path/to/targetPage' }); ``` 该策略特别适合于从二级页面转向三级页面而遇到的数据不同步问题[^4]。 #### 特殊情况处理——UC浏览器兼容性修复 考虑到部分移动设备上的特殊表现(例如UC浏览器中的异常现象),建议增加额外检测逻辑以确保跨平台一致性: ```javascript goBack() { try { plus.webview.currentWebview().opener().reload(); // 对应plus环境下的webview重载 } catch(e){ window.history.go(-1); // 非plus环境下正常历史记录回溯 } } ``` 上述代码片段尝试调用Plus插件提供的API进行页面重载;若失败则降级为标准的历史导航功能[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值