需求：利用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];
        _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.callPhone.postMessage();
window.webkit.messageHandlers.add.postMessage();
window.webkit.messageHandlers.edit.postMessage();
window.webkit.messageHandlers.delete.postMessage();

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

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"]) {
    }
}

到這裡就結束了，當你點選 webView 上的按鈕時，就能夠進入我們的OC方法裡。

總結起來就三點內容：

1.前端和蘋果移動端的方法名必須一致，且前端要以固定的格式來寫方法，否則移動端收不到事件反饋；
2.通過 WKUserContentController 新增html中預留的方法；
3.實現 WKScriptMessageHandler 的代理方法；