掌握 WKWebView 与 WKWebViewJavascriptBridge 框架的使用技巧

IOS

2024-02-08 12:44:18

iOS 开发必备：WKWebView 和 WKWebViewJavascriptBridge

在 iOS 开发中，创建混合应用程序和 Web 应用程序涉及到在原生代码和 Web 内容之间进行通信。这就是 WKWebView 和 WKWebViewJavascriptBridge 框架发挥作用的地方。

WKWebView：轻量且强大的 Web 视图

WKWebView 是 Apple 开发的 iOS 8 中引入的 WebKit 核心控件。它提供了一种加载和显示 Web 内容的更快速、更高效的方式，并具有以下优点：

较低的内存占用
更好的 HTML5 标准兼容性
更快的加载速度

WKWebViewJavascriptBridge：连接原生和 JavaScript

WKWebViewJavascriptBridge 框架填补了 WKWebView 和 JavaScript 代码之间的鸿沟，使它们能够进行双向通信。它允许你从原生代码调用 JavaScript 函数，反之亦然，从而实现以下功能：

调用原生方法从 JavaScript
从原生代码执行 JavaScript 函数
发送消息在原生代码和 JavaScript 之间传递

使用 WKWebView 和 WKWebViewJavascriptBridge

要将这些框架用于你的应用程序，请按照以下步骤操作：

代码示例：

// 创建 WKWebView 实例
WKWebView *webView = [[WKWebView alloc] init];

// 将 WKWebView 实例添加到视图层次结构
[self.view addSubview:webView];

// 创建 WKWebViewJavascriptBridge 实例
WKWebViewJavascriptBridge *bridge = [WKWebViewJavascriptBridge bridgeForWebView:webView];

// 注册一个 JavaScript 函数，它将从原生代码中调用
[bridge registerHandler:@"sayHello" handler:^(id data, WVJBResponseCallback responseCallback) {
    // 从原生代码处理 JavaScript 函数调用
    NSString *greeting = [NSString stringWithFormat:@"Hello, %@", data];
    responseCallback(greeting);
}];

// 从原生代码调用 JavaScript 函数
[webView evaluateJavaScript:@"sayHello('World')" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
    // 处理来自 JavaScript 的结果
}];

优化使用提示：

WKWebView：

使用 loadHTMLString: 方法加载 HTML 字符串以提高性能。
使用 evaluateJavaScript: 方法执行 JavaScript 代码。
配置 configuration 属性以控制加载行为和 JavaScript 执行。

WKWebViewJavascriptBridge：

使用 registerHandler: 注册 JavaScript 函数。
使用 callHandler: 调用原生方法。
使用 send: 向 JavaScript 发送消息。

常见问题解答：

如何判断 WKWebView 已加载页面？
- 监听 WKWebView 的 didFinishNavigation: 委托方法。
如何禁用 WKWebView 中的 JavaScript 执行？
- 设置 configuration.preferences.javaScriptEnabled 为 NO。
如何从 JavaScript 调用 WKWebViewJavascriptBridge？
- 在 JavaScript 代码中使用 bridge.callHandler() 函数。
如何在原生代码中处理 JavaScript 消息？
- 使用 WKWebViewJavascriptBridge 的 addHandler: 方法注册一个处理器。
如何从 WKWebView 发送消息到 JavaScript？
- 使用 WKWebViewJavascriptBridge 的 send: 方法。