wkWebViewjs交互

在iOS应用开发中，WKWebView是一个重要的组件，用于展示网页内容和实现应用程序与网页的交互。WKWebView替代了旧版的UIWebView，提供了更高效、更安全的网页加载和执行环境。本篇将深入探讨WKWebView与JavaScript的交互机制，以及如何在Objective-C（OC）中实现这一功能。理解WKWebView的基本用法是关键。创建一个WKWebView实例，通常需要配置一个WKWebViewConfiguration对象，然后使用这个配置创建并显示网页。以下是一个简单的初始化示例： ```objc WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init]; WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config]; [self.view addSubview:webView]; NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.example.com"]]; [webView load:request]; ```接下来，我们关注的是JS与OC之间的通信。WKWebView提供了两种主要的API来实现这一目标：`WKUserContentController`和`WKScriptMessageHandler`。 1. **WKUserContentController**：这是一个管理用户脚本的中心对象，可以添加JavaScript代码到WKWebView，并且定义消息处理程序。 ```objc WKUserContentController *userContentController = [[WKUserContentController alloc] init]; [userContentController addScriptMessageHandler:self name:@"callFromJS"]; NSString *jsCode = @"function callNativeFunction(message) { window.webkit.messageHandlers.callFromJS.postMessage(message); }"; WKUserScript *userScript = [[WKUserScript alloc] initWithSource:jsCode injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES]; [userContentController addUserScript:userScript]; ``` 2. **WKScriptMessageHandler**：这是OC对象需要遵守的协议，用于接收来自JavaScript的消息。 ```objc - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { if ([message.name isEqualToString:@"callFromJS"]) { NSLog(@"Received message from [removed] %@", message.body); //在这里处理接收到的消息} } ```在JavaScript端，你可以通过`window.webkit.messageHandlers.callFromJS.postMessage`调用来发送消息到OC。 ```javascript //在网页中的JavaScript代码function callNative() { window.webkit.messageHandlers.callFromJS.postMessage("Hello, Native!"); } ```此外，WKWebView还支持注入全局JavaScript对象，允许直接调用OC方法。例如： ```objc WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init]; config.userContentController = userContentController; WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config]; //注册全局对象NSDictionary *globalObject = @{@"myNativeFunction": ^NSString*(NSString *message) { return [NSString stringWithFormat:@"Native received: %@", message]; }}; WKWebViewJavaScriptContextObserver *observer = [[WKWebViewJavaScriptContextObserver alloc] initWithWebView:webView globalObject:globalObject]; [webView addObserver:observer forKeyPath:@"WKWebViewJavaScriptContext" options:NSKeyValueObservingOptionNew context:nil]; //加载网页NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.example.com"]]; [webView load:request]; ```这样，JavaScript就可以通过全局对象`myNativeFunction`直接调用OC的方法了。总结来说，WKWebView与JavaScript交互涉及的主要步骤包括： 1.创建WKWebView实例和配置。 2.设置WKUserContentController，并添加JavaScript代码和消息处理程序。 3.在JavaScript中调用`postMessage`发送消息，或直接调用注入的全局对象方法。 4.在OC中实现WKScriptMessageHandler协议，接收并处理JavaScript的消息。以上就是使用Objective-C实现WKWebView与JavaScript交互的基本方法和步骤，通过这种方式，开发者可以实现更丰富的混合应用功能，如数据交换、事件通知等。