You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

WKWebView在iOS模拟器上显示空白(已开启任意加载权限)

解决iOS 10.2模拟器上WKWebView空白仅显示滚动条的问题

我之前在iOS10版本的WKWebView上踩过一模一样的坑,结合你的描述和代码片段,给你梳理几个最可能的原因和对应的解决办法:

1. 检查WebView的布局约束/Frame设置

从你代码里loadView的写法来看,大概率是没有给WKWebView设置正确的布局。如果只是初始化了webView但没让它铺满整个控制器的view,就会出现内容区域异常(看起来宽度很大但实际无内容),同时滚动条莫名显示的情况。

解决办法:
loadView里初始化webView后,一定要把它设置为控制器的根view,同时别忘了关联代理:

override func loadView() {
    let webConfiguration = WKWebViewConfiguration()
    webView = WKWebView(frame: .zero, configuration: webConfiguration)
    webView.uiDelegate = self // 必须设置uiDelegate,否则部分Web交互会失效
    self.view = webView // 关键:把webView作为控制器的根view,自动铺满屏幕
}

如果是用Auto Layout的话,也要给webView添加铺满父view的约束,避免frame设置不当导致的布局偏移。

2. 添加上WKNavigationDelegate,排查加载错误

你目前只实现了WKUIDelegate,但没有设置WKNavigationDelegate,这会导致你完全不知道页面是否真的加载成功——说不定是URL无效、加载超时或者HTTPS证书出了问题,只是你看不到报错而已。

建议补上这个代理并实现关键回调:

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate { // 添加协议
    var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        webView.navigationDelegate = self // 关联导航代理
        self.view = webView
    }

    // 页面加载失败时触发,能直接看到错误原因
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        print("页面加载炸了:\(error.localizedDescription)")
    }

    // 页面加载完成的回调,确认加载流程正常
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("页面终于加载完啦")
    }
}

通过这些回调可以快速区分是加载环节出了问题,还是布局本身的锅。

3. 检查ATS设置的完整性

虽然你已经把Allow Arbitrary Loads设为YES,但在iOS10上,有时候还需要确认配置没有写错或者遗漏。打开info.plist检查ATS的配置是否完整:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

避免出现拼写错误或者层级嵌套错误,导致ATS规则不生效。

4. 排查页面本身的兼容性问题

iOS10的WKWebView对一些旧的JS语法、奇怪的viewport设置兼容性较差,你可以先尝试加载一个简单的测试URL(比如https://www.apple.com),看看是否能正常显示,排除是目标页面本身的问题。

另外,也可以手动开启JS支持(默认是开启的,但偶尔会被意外修改):

webConfiguration.preferences.javaScriptEnabled = true

内容的提问来源于stack exchange,提问作者romain64

火山引擎 最新活动