iOS WKWebView OC 与 JS 交互学习

介绍

WKWebView是在iOS 8中引入的一种全新的网页浏览器控件。它基于WebKit引擎，能够提供更好的性能和更强大的功能，是iOS开发中常用的控件之一。其中，与JavaScript的交互是WKWebView的重要功能之一，本文将介绍如何在Objective-C中使用WKWebView与JavaScript进行交互。

基本使用

首先，我们需要在UIViewController中创建WKWebView实例，加载网页并显示。

1. 导入头文件

#import <WebKit/WebKit.h>

2. 在UIViewController中添加WKWebView属性和实例化代码

@property (nonatomic, strong) WKWebView *webView;

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:self.webView];
    
    NSString *urlString = @"https://www.example.com";
    NSURL *url = [NSURL URLWithString:urlString];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
}

3. 运行效果

这样就可以在界面中显示加载的网页了。可以手动滑动页面，浏览网页中的内容。

JS调用OC方法

接下来，我们来介绍如何在JavaScript中调用Objective-C的方法。

1. 在Objective-C中添加JS调用的方法

- (void)showAlert:(NSString *)message {
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:nil];
    [alert addAction:okAction];
    [self presentViewController:alert animated:YES completion:nil];
}

2. 添加JS与OC交互的配置

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:self.webView];
    
    NSString *urlString = @"https://www.example.com";
    NSURL *url = [NSURL URLWithString:urlString];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
    
    // 添加JS与OC交互的配置
    WKUserContentController *userContentController = self.webView.configuration.userContentController;
    [userContentController addScriptMessageHandler:self name:@"showAlert"];
}

3. 实现WKScriptMessageHandler协议的方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"showAlert"]) {
        NSString *content = [NSString stringWithFormat:@"%@", message.body];
        [self showAlert:content];
    }
}

4. 在JavaScript中调用Objective-C的方法

window.webkit.messageHandlers.showAlert.postMessage("Hello, WKWebView!");

当JavaScript代码执行后，Objective-C中的showAlert:方法将被调用，显示一个弹窗提醒。

OC调用JS方法

除了让JavaScript调用Objective-C的方法，我们也可以让Objective-C调用JavaScript的方法。

1. 在Objective-C中调用JavaScript方法

- (void)callJavaScriptMethod {
    NSString *jsCode = @"alert('Hello, JavaScript!');";
    [self.webView evaluateJavaScript:jsCode completionHandler:nil];
}

2. 添加一个按钮，点击后调用Objective-C的方法

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:self.webView];
    
    NSString *urlString = @"https://www.example.com";
    NSURL *url = [NSURL URLWithString:urlString];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
    
    // 添加JS与OC交互的配置
    WKUserContentController *userContentController = self.webView.configuration.userContentController;
    [userContentController addScriptMessageHandler:self name:@"showAlert"];
    
    // 添加一个按钮，点击后调用Objective-C的方法
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    button.frame = CGRectMake(0, 0, 100, 40);
    button.center = self.view.center;
    [button setTitle:@"调用JS方法" forState:UIControlStateNormal];
    [button addTarget:self action:@selector(callJavaScriptMethod) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

当按钮被点击后，Objective-C中的callJavaScriptMethod方法将被调用，JavaScript中的alert方法将在界面中显示一个弹窗提醒。

总结

通过以上介绍，我们可以看到在Objective-C中使用WKWebView与JavaScript进行交互，可以实现相对复杂的功能。通过JS调用OC方法和OC调用JS方法，可以让Web页面和Native页面实现更紧密的交互，提供更好的用户体验。同时，开发者也需要注重安全性，避免恶意脚本对用户造成伤害。

本文来自极简博客，作者：秋天的童话，转载请注明原文链接：iOS WKWebView OC 与 JS 交互学习