Objective-C中如何捕获WKWebView内的按钮点击事件？

阿华AIGC实验室

2026-5-25

解决Objective-C中WKWebView捕获网页按钮点击的问题

嘿，我明白你卡在WKWebView和网页JS交互这了，别着急，咱们一步步来搞定它！核心思路是利用WKWebView的JS与原生交互机制，让网页里的按钮事件主动通知Objective-C代码，具体步骤如下：

1. 配置WKWebView，添加脚本消息处理器

首先，你需要在初始化WKWebView的时候，给它的配置项添加一个脚本消息处理器，这样才能接收网页JS发来的消息。

// 先确保你的ViewController遵守WKScriptMessageHandler协议
@interface YourViewController () <WKScriptMessageHandler>
@property (nonatomic, strong) WKWebView *webView;
@end

@implementation YourViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    // 添加脚本消息处理器，name要和JS里调用的名称完全对应，比如这里叫"iOSApp"
    [config.userContentController addScriptMessageHandler:self name:@"iOSApp"];
    
    self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
    [self.view addSubview:self.webView];
    
    // 加载你的目标网页（本地或远程URL都可以）
    NSURL *url = [NSURL URLWithString:@"你的网页地址"];
    [self.webView loadRequest:[NSURLRequest requestWithURL:url]];
}

// 页面销毁时一定要移除处理器，避免内存泄漏
- (void)dealloc {
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"iOSApp"];
}

2. 实现协议方法，接收并处理JS消息

接下来实现WKScriptMessageHandler协议里的方法，这里就是你捕获网页事件的核心逻辑处：

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    // 先判断消息名称，确保是我们要处理的目标消息
    if ([message.name isEqualToString:@"iOSApp"]) {
        // message.body是JS传过来的数据，支持字符串、字典等格式，这里用字典区分动作类型
        NSDictionary *messageBody = (NSDictionary *)message.body;
        NSString *actionType = messageBody[@"action"];
        
        // 根据网页传来的动作，执行对应原生逻辑
        if ([actionType isEqualToString:@"checkLogin"]) {
            // 这里写你的登录检查逻辑
            NSLog(@"网页请求检查登录状态");
        } else if ([actionType isEqualToString:@"addFavorite"]) {
            NSString *favoriteId = messageBody[@"id"];
            // 处理收藏逻辑，参数是网页传过来的id
            NSLog(@"执行收藏操作，ID：%@", favoriteId);
        }
    }
}

3. 修改网页JS代码，主动向iOS发送事件

你原来的网页里有AddtoFavorite函数，现在需要修改它，当检测到iOS环境时，调用WKWebView的专属消息接口，把事件传递给原生代码：

function AddtoFavorite(id) {
    var isAndroid = "0";
    var login = "0";
    // 通过userAgent判断是否为iOS设备
    var isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    
    if (isAndroid == "1") {
        if (login == "0") {
            Android.checkLogin();
        } else {
            favourite(id);
        }
    } else if (isiOS) { // 处理iOS场景
        if (login == "0") {
            // 给iOS原生发消息，告知需要检查登录
            window.webkit.messageHandlers.iOSApp.postMessage({
                "action": "checkLogin"
            });
        } else {
            // 给iOS原生发消息，传递收藏的ID参数
            window.webkit.messageHandlers.iOSApp.postMessage({
                "action": "addFavorite",
                "id": id
            });
        }
    }
}