2021 - 46周(WKWebView后台白屏)

当app从后台返回时,使用WKWebView加载的H5页面偶尔出现白屏现象。分析认为这与设备内存使用有关。解决方案是在app唤醒时检测WKWebView状态,若白屏则重新加载页面。判断白屏的方法包括检查title是否为空、URL是否为about:blank、执行JS获取document.body.innerHTML及屏幕截图分析。

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

问题描述

        当打开app中使用WKWebView嵌入的H5页面,然后切换到其它app一段时间后再切回本app时,偶现H5页面白屏(没有任何内容展示)的现象。

        此时app并未被杀死,返回其它页面后,app仍然可以继续正常运行,只是当前H5页面没有任何内容。初步判断只是系统将WKWebView的内容清空了。经过我们多次模拟,发现这是一种介于app在后台可被唤醒继续运行和app在后台被杀死之间的状态。猜测其原因还是与设备的内存使用有关(因为在app退到后台的情况下,多使用一些占用内存较大的其它app,更容易复现出该问题)。

解决思路

        对于这个问题的解决思路,我们认为可以在app从后台唤醒的时候,判断当前webview的状态,如果是展示白屏,那么就重新加载一遍刚才的网页,即可重新展示刚才的内容了,只不过页面会从顶部展示(没有锚点到刚才用户浏览的位置),我们认为这一点可以接受。

        这个方案中其它步骤都好处理,关键问题就是如何判断当前webview处于白屏的状态。下面我就说说我们通过查找资料和测试实践发现的几种判断白屏的方式。

判断webview白屏的一些思路

  • 判断当前webview的title为空
//webView就是WKWebView对象
self.webView.title == nil || self.webView.title.length == 0

        我们最终就是使用这种方式。经过测试,当webview白屏时,其title为空字符串,为了更严谨&#

### iOS 应用内嵌 H5 页面跳转实现方法 为了实现在 iOS 应用中内嵌 H5 页面并能够顺利进行页面间的跳转,可以采用以下几种方式: #### 使用 `WKWebView` 加载网页 对于现代的 iOS 开发来说,推荐使用 `WKWebView` 来替代旧版的 `UIWebView`。这不仅能提供更好的性能表现,还支持更多的 HTML5 特性和 JavaScript API。 ```swift import WebKit class ViewController: UIViewController, WKNavigationDelegate { var webView: WKWebView! override func viewDidLoad() { super.viewDidLoad() webView = WKWebView(frame: self.view.frame) webView.navigationDelegate = self let url = URL(string: "https://example.com")! let request = URLRequest(url: url) webView.load(request) view.addSubview(webView) } } ``` 当涉及到从 H5 页面向原生应用发送消息时,则可以通过注册自定义的消息处理器来处理这些通信请求[^1]。 #### 处理来自 H5 的事件通知 为了让 H5 可以触发特定的行为比如打开新的视图控制器或者其他操作,在 Swift 中设置相应的监听器是非常重要的。下面是一个简单的例子展示了怎样接收到来自 webview 内部发出的信息,并据此执行某些动作。 ```swift // 注册 message handler webView.configuration.userContentController.add(self, name: "share") extension ViewController: WKScriptMessageHandler { public func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { guard message.name == "share", let body = message.body as? [String : Any], let tuid = body["tuid"] else { return } // Handle the received data here. print("Received share event with parameter \(tuid)") } } ``` 与此同时,在前端部分也需要相应地调整代码以便于发起这样的跨平台调用。这里给出了一段用于检测设备类型以及传递参数给宿主应用程序的例子[^2]。 ```javascript $(document).on('click','#btn',function(event){ if (navigator.userAgent.match(/iPhone|iPod|iPad/) && navigator.userAgent.indexOf('Safari') != -1 ) { const params = {'tuid': uid}; window.webkit.messageHandlers.share.postMessage(params); } else { console.log('Not an iOS device or not using Safari.'); } }); ``` 通过上述配置,就可以有效地建立起 H5 和 iOS 原生组件之间稳定可靠的桥梁,从而完成所需的任务流程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值