iOS WKWebView加载含iframe的Vue H5页面白屏问题解决方案问询

一、iOS端WKWebView侧调整 #

• 开启跨域访问权限，初始化WKWebView时使用如下配置：

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKPreferences *preferences = [[WKPreferences alloc] init];
preferences.javaScriptEnabled = YES;
preferences.javaScriptCanOpenWindowsAutomatically = YES;
// 开启iframe跨域文件访问权限
[preferences setValue:@(YES) forKey:@"allowUniversalAccessFromFileURLs"];
[preferences setValue:@(YES) forKey:@"allowFileAccessFromFileURLs"];
config.preferences = preferences;
// 允许内联媒体播放，避免带媒体资源的iframe加载异常
config.allowsInlineMediaPlayback = YES;
if (@available(iOS 10.0, *)) {
    config.mediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypeNone;
}
// 使用该config初始化WKWebView
self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];

• 放行iframe子帧请求，实现WKNavigationDelegate代理方法：

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    // 非主帧的iframe请求直接放行
    if (!navigationAction.targetFrame.isMainFrame) {
        decisionHandler(WKNavigationActionPolicyAllow);
        return;
    }
    // 原有主帧请求的校验逻辑写在此处
    decisionHandler(WKNavigationActionPolicyAllow);
}

• 添加进程异常兜底逻辑，避免iframe加载触发进程终止导致白屏：

- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView {
    [webView reload];
}

• 检查ATS配置，如果iframe加载的是HTTP协议资源，需要在Info.plist中添加对应权限，可先临时全局放开验证问题：

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

二、Vue H5侧调整 #

• iframe的src使用绝对路径，避免相对路径在WKWebView中解析异常，同时在组件mounted阶段直接完成赋值，不要做延迟加载处理。
• 给iframe添加v-once属性，避免Vue响应式更新触发iframe重复重绘导致加载失败：

<iframe v-once :src="你的iframe地址" width="100%" height="100%" frameborder="0"></iframe>

• 如果配置了sandbox属性，必须补充allow-same-origin allow-scripts权限，否则WKWebView会拦截iframe内的脚本执行和资源加载：

<iframe 
    v-once 
    :src="你的iframe地址" 
    sandbox="allow-same-origin allow-scripts allow-popups"
    width="100%" 
    height="100%" 
    frameborder="0">
</iframe>

• 不要使用display: none控制iframe的显隐，切换显隐时改用visibility: hidden或者opacity: 0实现，WKWebView会直接暂停设置为display:none的元素的资源加载，重新显示时也不会自动恢复。

内容的提问来源于stack exchange，提问作者Aedgen