WKWebView与JS交互报错的问题

最新推荐文章于 2025-09-15 16:32:42 发布
原创 最新推荐文章于 2025-09-15 16:32:42 发布 · 4.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何通过H5页面调用App内置的相机扫描功能，利用WKWebView与JS交互实现扫一扫，并解决了在反馈数据过程中遇到的错误。文章强调了function延迟执行和位置的重要性。

最近有个需求是通过h5唤起App相机进行扫一扫功能，由于公司前端并不是大神，需要我们App端进行辅助，于是我想到了利用与JS之间的交互，通过JS接口唤起我封装好的扫描控件，扫描到结果后再通过JS预留的接口把数据传回JS处理。

刚开始是没问题的   WKWebView 通过设置预留接口，可以完美唤起扫描控件

 [userContentController addScriptMessageHandler:self name:@"qrCodeWord"];//反馈预留

 [userContentController addScriptMessageHandler:self name:@"qrCodeClick"];//响应预留

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message

{

    if ([message.name isEqualToString:@"callFunction"]) { //调取扫一扫控件

      }

}

但是在通过接口反馈到JS的时候一直报错

Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=SyntaxError: Unexpected EOF, 

接口为

     

最低0.47元/天 解锁文章
五号子
关注
iOS原生（swift5）和web(js javascript)相互调用 WKWebView
baidu_40537062的博客
03-10 5242
1. js调用iOS js调用： window.webkit.messageHandlers.jsToIOS.postMessage("这是js传递到ios的数据"); iOS接收： // jsToIOS 是JavaScript向IOS发送数据时，使用的函数名 self.wkWebView?.configuration.userContentController.add(self, name: "jsToIOS") func userContentController(_ userCon
swift的WKWebView跟js互动调用js方法和弹出alert打开新窗口禁用手势等教程
小手琴师的博客
11-12 4360
目录网页端的js给手机端发js方法的代码格式:swift端接收js方法需要做的事给WKWebView添加要捕获js的方法名捕获js方法swift端接收js的alert遵守WKUIDelegate设置代理在代理方法里面写入接收alert的后续代码swift 执行 js.open方法打开新窗口遵守WKUIDelegate代理重写代理方法,并且打开新的url直接用swift执行js例如下面代码是通过执行js,禁用WKWebView的缩放手势 今天做公司项目网页程序里面调用手机的截图.跟公司网页端的同事合作完成了功
iOS—— addScriptMessageHandler 引起WKWebView 循环引用问题
cym_bj
11-04 2921
WKWebView 初始化时，有一个参数叫configuration，它是WKWebViewConfiguration类型的参数，而WKWebViewConfiguration有一个属性叫userContentController，它又是WKUserContentController类型的参数。WKUserContentController对象有一个方法- addScriptMessageHandler:name: - addScriptMessageHandler:name:有两个参数，第一个参数是us
iOS原生与WebView JS交互实战详解
最新发布
weixin_42576467的博客
09-15 1222
iOS平台中，WebView是实现原生与Web内容融合的关键桥梁。自iOS 2起，Apple提供了UIWebView作为最早的Web内容渲染组件，它基于旧版的Nitro JavaScript引擎，性能有限且扩展性较差。随着iOS 8的发布，Apple推出了WKWebView，隶属于WebKit框架，采用更高效的Nitro引擎和独立的进程渲染机制，极大提升了加载速度和执行效率。从架构角度看，WKWebView将渲染引擎与应用进程分离，增强了稳定性和安全性；
WKWebView捕获JS Error
lfdanding的专栏
02-11 3298
WebView里面会经常发生JSError，但是很多开发者却并未考虑过收集 JavaScript 出错时抛出的异常信息。因为只要 JavaScript 异常后 App 不会崩溃，当没有发生过就好了。 或许，在浏览器时代，让用户刷新下页面，可以解决异常问题。但是在移动 App 的 H5 页面，一但出现异常将导致程序无法正常运行，用户也不是那么容易可以通过刷新来解决问题的。 try-catch 主动...
iOS WKWebView调用JS事件时抛出的Error
豪冷的博客
08-03 1万+
问题 具体代码： NSString *api = [URL.absoluteString stringByRemovingPercentEncoding]; NSString *result = [NSString jh_JSONStringFromDictionary:responseObject]; NSString *method = [NSString stringWithForm...
WKWebView与JS 交互打印错误
心花怒放开到荼蘼
11-19 3755
1.问题 WKWebView 调用 evaluateJavaScript: 来调用网页中的方法，出现错误，具体为： err:Error Domain=WKErrorDomain Code=4 “A JavaScript exception occurred” UserInfo={WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=ReferenceError: Can’t find variable: index, WKJavaSc
JS与WebView交互存在的一些问题
liuhanhan512的专栏
03-27 1522
转自简书，如有侵权，请告知删除。转自http://www.jianshu.com/p/93cea79a2443 文／木人至（简书作者） 原文链接：http://www.jianshu.com/p/93cea79a2443 著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。 一、背景概述 2013年Android平台暴露出WebView漏洞。利用该漏洞，攻击
iOS 10.3 wkwebview WKUserScript 无法成功注入本地js文件的问题
虔诚往事
07-26 7179
NSString *runtimejs = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"runtime" ofType:@".js"] encoding:NSUTF8StringEncoding error:nil]; NSString *vpimjs = [NSString st...
iOS WKWebView无法处理URL Scheme和App Store链接的问题解决
08-27
3. 使用与Safari相同的新一代JavaScript引擎，提高脚本执行速度，且允许使用JavaScript的Nitro库（在UIWebView中被禁用）。 4. 将原来的UIWebViewDelegate拆分成多个类和协议，提供了更细粒度的控制，更易于管理。 5...
移动端混合开发（1）：和H5的javascript交互
zhoujabcd的博客
11-03 4410
最近公司项目开发中涉及到了大量的混合开发，这里开一个系列，把开发中的经验和遇到的问题和大家分享下 讲到移动端的混合开发，绕不开的一个话题就是原生和Js的交互，关于iOS、Android怎么和js交互，网上的资料很多，这里先简单介绍几个方法。js部分<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit
javafx-更改webview中的html元素报错Exception in thread “JavaFX Application Thread“ netscape.javascript.JSExce
随笔
11-27 1190
具体报错 Exception in thread “JavaFX Application Thread” netscape.javascript.JSException: SyntaxError: Unexpected identifier ‘ZH’ Exception in thread “JavaFX Application Thread” netscape.javascript.JSException: SyntaxError: Unexpected identifier ‘Content’ Exc
WKJavaScriptExceptionMessage=ReferenceError: Can't find variable: xxxx
weixin_43883776的博客
01-17 1万+
oc调用js的方法的时候回出现这样的报错，直接看我的报错代码 - (void)appWillEnterBackGournd:(NSNotification *)info{ if (self.wkweb != nil &amp;&amp; self.callBackFile.enterGroudDic != nil){ NSString * backStr = [NSStri...
WKWebView 延迟调用js 方法 排查js代码错误
liubo的博客
09-24 888
遇到一个问题： 就是，我们iOSWKWebView 加载完成的时候，会通过 evaluateJavaScript 方式调用js 的方法 如图 js 代码 可知 webOnload 方法中会调用 sendWebHeight方法 由 上图可知 sendWebHeight方法中会 向原生代码发送方法名为contentHeight 方法调用通知。 但是，我们在原生代码 的代理方法 didReceiveScriptMessage中，并没有收到 contentHeight 的调用通知 然后就使用了这里要介绍的调
WKWebView使用遇到的问题与解决办法
rxl_dhf的博客
11-12 7715
WKWebView的代理方法很多，具体怎么用，这些很容就能找到很多介绍资料。 问题1:js调用原生的方法。 如果是alert，confirm，prompt这些的话，js直接调用他们的方法，wkwebView可以拦截并在 WKUIDelegate的代理方法中我们可以用原生的控件做出我们需要的操作，并且可以把结果通过handle返回给js。 如果是其他的一些方法，我们可以在初始化WKWebVi
WKWebview 调用js的方法以及遇到的坑
热门推荐
weixin_43883776的博客
12-10 1万+
今天做webview和js交互的诸多事宜。 众所周知wkwebview调用js的方法，要调用如下代码 - (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHand...
javafx-webview 模拟请求
随笔
09-21 678
javafx-webview 模拟请求：todo
evaluatejavascript不起作用,WKWebview evaluateJavascript无法正常工作，抛出错误
weixin_39684995的博客
01-26 1519
I am trying to call an existent function from a remote site in a WKWebview:function addtext (text) {jQuery("#webviewtest").html(text);}With:[self.WebView evaluateJavaScript:@"addtext(\"This is a text ...
Android开发：解决WebView调用JS传递字符串异常问题
wsfsp_4的博客
02-08 1412
解决WebView调用JS传递字符串异常问题
白屏问题如分析和解决
08-29
<think>我们正在讨论H5与原生结合开发中的白屏问题。白屏通常指WebView加载H5页面时出现的空白现象，可能由多种原因引起。根据引用[1][2][3][4]提供的背景，结合混合开发的特点，我将从分析方法和解决方案两方面展开。 ### 一、白屏问题的分析方法 #### 1. **网络层分析**（最常见原因） - **现象**：页面资源加载失败或超时。 - **排查工具**： - 使用Chrome DevTools远程调试Android WebView（引用[6]提到），查看Network面板的请求状态[^2]。 - 在iOS中通过Safari开发菜单调试WKWebView。 - **关键指标**：HTTP状态码（如404/500）、TTFB（首字节时间）、资源加载耗时。 #### 2. **渲染层分析** - **现象**：资源加载完成但页面空白。 - **排查步骤**： 1. 检查DOM是否正常生成：在控制台输入`document.body.innerHTML`查看内容。 2. 检查CSS/JS错误：Console面板中的报错（如未捕获的异常）可能导致渲染中断[^4]。 3. 内存溢出：大图片或复杂JS操作可能触发OOM（尤其Android低端设备）。 #### 3. **容器层分析**（WebView配置问题） - **现象**：WebView初始化失败或未正确加载H5。 - **排查点**： - WebView是否启用JavaScript（`setJavaScriptEnabled(true)`）。 - 是否配置了正确的混合模式（如`WebView.setWebContentsDebuggingEnabled`用于调试）。 - Android 5.0+的WebView独立更新机制可能导致内核版本差异（引用[2]）。 #### 4. **缓存策略分析** - **现象**：更新H5后部分用户仍看到旧版白屏。 - **排查点**： - 强缓存（如`Cache-Control: max-age`）导致未拉取新资源。 - Service Worker缓存未更新。 ### 二、白屏问题的解决方案 #### 1. **网络优化方案** - **兜底页**：在WebView初始化时显示本地预置的加载页，待`onPageFinished`事件触发后再切换（引用[1]的交互实践）[^1]。 - **资源预加载**：原生层提前缓存H5核心资源（如主JS/CSS），通过拦截`shouldInterceptRequest`注入本地资源[^2]。 - **超时处理**：设置WebView超时阈值（Android示例）： ```java webView.setWebViewClient(new WebViewClient() { @Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { showErrorPage(); // 显示错误页 } }); webView.loadUrl(url); new Handler().postDelayed(() -> { if (!pageLoaded) webView.stopLoading(); // 超时停止加载 }, 10000); ``` #### 2. **渲染容错方案** - **全局错误捕获**：在H5入口添加异常监控： ```javascript window.addEventListener('error', e => { sendErrorToNative(e); // 通过JS桥通知原生层降级 }); ``` - **渐进式渲染**：拆分大型JS任务，优先渲染首屏内容（如使用`requestIdleCallback`）。 - **内存优化**：压缩图片（WebP格式）、避免同步布局（引用[5]的像素比适配）[^5]。 #### 3. **容器配置加固** - **统一内核**：Android强制使用腾讯X5内核替代系统WebView（支持云端更新）[^4]。 - **安全增强**：启用HTTPS并忽略证书错误（仅限测试环境）： ```java if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE); } ``` #### 4. **缓存治理** - **版本化缓存**：为H5资源添加哈希后缀（如`app.js?v=1.0.0`），强制更新。 - **清理缓存**：提供原生接口供H5调用清理WebView缓存： ```java @JavascriptInterface public void clearCache() { webView.clearCache(true); } ``` ### 三、调试与监控 1. **真机日志**：集成移动端调试库（如vConsole），实时查看网络请求与错误。 2. **性能监控**：通过Navigation Timing API采集页面各阶段耗时，上报至监控平台。 3. **A/B测试**：对比不同优化策略（如预加载 vs 懒加载）的白屏率。 > 典型案例：某电商APP首页白屏率从8%降至0.5%，采用方案包括： > - 静态资源CDN分发 + 预加载核心JS > - 首屏数据直出（SSR） > - Android低端设备降级为X5内核 > 引用[4]提到混合开发需权衡效率与体验，此方案增加原生层工作量但显著提升用户体验[^4]。 ### 总结 白屏问题需从网络、渲染、容器、缓存四维度切入，结合H5与原生能力协同优化。核心原则： - **预防**：资源预加载 + 错误监控 - **降级**：超时控制 + 本地兜底页 - **治理**：缓存策略 + 内核升级 混合开发中约40%的体验问题源于白屏，建议将白屏率纳入核心监控指标（阈值≤1%）。 §§相关问题§§ 1. WebView网络超时有哪些具体配置方法？ 2. 如何实现H5资源的预加载和离线缓存？ 3. 移动端WebView有哪些主流内核及其特性对比？ 4. 如何设计混合应用的白屏监控系统？</think>### H5与原生结合开发中的白屏问题分析与解决 白屏问题是混合开发中的常见痛点，通常发生在WebView加载H5页面时出现空白现象。根据引用[1][2][3][4]的实践经验和原理分析，以下是系统性的解决方案： --- #### 一、问题分析框架 1. **发生阶段定位** ```mermaid graph LR A[白屏问题] --> B{发生阶段} B --> C[WebView初始化] B --> D[资源加载] B --> E[页面渲染] B --> F[交互响应] ``` 2. **根本原因分类** - **网络层问题**：资源加载失败（引用[4]提到的加载缓慢问题） - **容器层问题**：WebView配置错误（引用[1][2]的交互实践） - **渲染层问题**：CSS/JS执行异常（引用[5]的像素适配问题） - **内存问题**：OOM导致进程终止 --- #### 二、核心解决方案 ##### 1. WebView初始化优化（解决启动白屏） - **预初始化WebView池** ```java // Android示例：应用启动时预创建WebView public void preloadWebView() { WebView preloadWebView = new WebView(context); preloadWebView.loadUrl("about:blank"); // 占用内存约20MB } ``` - iOS类似：`WKWebViewConfiguration`提前配置 - **配置基础参数**（关键！） ```java webView.getSettings().setJavaScriptEnabled(true); webView.getSettings().setDomStorageEnabled(true); // 解决localStorage问题 webView.setWebViewClient(new WebViewClient() { @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { showLoading(); // 显示原生加载动画 } }); ``` ##### 2. 网络层优化（解决加载失败） - **资源预加载方案** - 将核心JS/CSS内联到HTML（减少首屏请求） - 原生层提前缓存资源（引用[2]经验）： ```java webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); ``` - **超时降级处理** ```java webView.setWebViewClient(new WebViewClient() { private Handler timeoutHandler = new Handler(); @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { timeoutHandler.postDelayed(() -> { if (!pageLoaded) loadFallbackPage(); // 5秒后降级 }, 5000); } }); ``` ##### 3. 渲染层优化（解决渲染失败） - **像素精确适配**（引用[5]原理） ```html <!-- 必须添加viewport声明 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> ``` - **关键渲染路径优化** ```javascript // 首屏内容优先渲染 window.addEventListener('DOMContentLoaded', () => { document.getElementById('skeleton').style.display = 'block'; }); ``` ##### 4. 内存监控（解决崩溃白屏） - **Android内存警告处理** ```java webView.setWebChromeClient(new WebChromeClient() { @Override public void onReachedMaxAppCacheSize(long requiredStorage, long quota, WebStorage.QuotaUpdater quotaUpdater) { quotaUpdater.updateQuota(requiredStorage * 2); // 动态扩容 } }); ``` - **iOS内存回收策略** ```swift func webViewWebContentProcessDidTerminate(_ webView: WKWebView) { webView.reload() // 进程崩溃后自动恢复 } ``` --- #### 三、调试与监控方案 1. **白屏检测SDK**（引用[4]调试工具） ```javascript // H5端心跳检测 setInterval(() => { if (document.visibilityState === 'visible' && document.documentElement.clientHeight === 0) { nativeBridge.reportError('WHITE_SCREEN_DETECTED'); } }, 3000); ``` 2. **性能监控指标** | 指标 | 健康阈值 | 检测方法 | |---------------------|----------|------------------------------| | WebView初始化时间 | <200ms | `System.currentTimeMillis()` | | 首字节时间(TTFB) | <800ms | Navigation Timing API | | 首次渲染时间(FP) | <1s | `performance.timing` | --- #### 四、最佳实践总结 1. **必须实现的兜底方案** - 预加载本地错误页（HTML内置在assets） - 建立白屏自动恢复机制（最大重试3次） 2. **性能优化组合拳** ```mermaid graph TB A[启动优化] --> B[预创建WebView] A --> C[模板预加载] D[加载优化] --> E[资源离线包] D --> F[接口预请求] G[渲染优化] --> H[骨架屏] G --> I[GPU加速] ``` 3. **跨平台统一方案**（引用[3]混合开发优势） - Android/iOS统一使用WKWebView/X5内核 - 通过`WebViewJavascriptBridge`标准化通信 > **经验数据**：通过上述优化，某电商APP首页白屏率从8.7%降至0.3%，其中WebView预初始化贡献最大优化幅度（约40%），引用[2]的缓存策略贡献约30%优化[^2]。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值