需求：利用webView載入H5頁面，並實現點選H5頁面的按鈕觸發事件，事件是呼叫OC的方法。
簡單說就是JS呼叫OC的方法，這裡我們選擇的是WKWebView，至於為什麼不用UIWebView，自行百度或者看開發文件。
實現：
1、首先應該倒入 WebKit 框架 #import <WebKit/WebKit.h>

2、懶載入一個webView

//需要的代理
<WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler>

@property (nonatomic , strong) WKWebView *webView;


- (WKWebView *)webView{
    if (!_webView) {
        WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
        _webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, NAVHEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT-NAVHEIGHT) configuration:config];
        if (@available(iOS 11.0, *)) {
            [configuration setURLSchemeHandler:self.handler forURLScheme:@"webImage"];
        }
        _webView.UIDelegate = self;
        _webView.navigationDelegate = self;
        NSURLRequest *request = [[NSURLRequest alloc]initWithURL:[NSURL URLWithString:self.structureUrl]];
        [_webView loadRequest:request];
    }

    return _webView;

}
 

3、JS端的方法構成HTML程式碼：

切記在html中預留介面，格式必須是固定的：

window.webkit.messageHandlers.actionName.postMessage('parameter');
actionName：為方法名
parameter：為傳遞過來的引數，在html中叫做物件，到OC我們這裡就是字典

舉個例子：

window.webkit.messageHandlers.actionName.postMessage('parameter');
actionName：為方法名
parameter：為傳遞過來的引數，在html中叫做物件，到OC我們這裡就是字典
 

這裡我們沒有帶引數，要是需要引數，就讓前端加上，你不會沒關係，也不需要你會，前端知道該怎麼做。

4、OC端新增JS方法處理器：

  WKUserContentController *userContentController = _webView.configuration.userContentController;
        [userContentController addScriptMessageHandler:self name:@"callPhone"];
        [userContentController addScriptMessageHandler:self name:@"add"];
        [userContentController addScriptMessageHandler:self name:@"edit"];
        [userContentController addScriptMessageHandler:self name:@"delete"];
 

這裡我們添加了了四個方法，切記著四個方法的名稱無比與JS端一致。

5、實現WKScriptMessageHandler代理方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    NSLog(@"ScriptMessage 傳遞的訊息內容 : %@",message.body);
    if ([message.name isEqualToString:@"callPhone"]) {
    }
    if ([message.name isEqualToString:@"add"]) {
    }
    if ([message.name isEqualToString:@"edit"]) {
    }
    if ([message.name isEqualToString:@"delete"]) {
    }
}

6、在介面消失的時候清除JS方法

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
   
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"callPhone"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"add"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"edit"];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"delete"];

 }

到這裡就結束了，當你點選 webView 上的按鈕時，就能夠進入我們的OC方法裡。
總結起來就三點內容：
1.前端和蘋果移動端的方法名必須一致，且前端要以固定的格式來寫方法，否則移動端收不到事件反饋；
2.通過 WKUserContentController 新增html中預留的方法；
3.實現 WKScriptMessageHandler 的代理方法；