WKWebView与JS交互

一、JS调OC

相关方法

//添加ScriptMessage（JS事件）和处理者

- (void)addScriptMessageHandler:(id )scriptMessageHandler name:(NSString *)name;

//移除指定ScriptMessage（JS事件）监听

- (void)removeScriptMessageHandlerForName:(NSString *)name;

JS调用OC

ScriptMessage（JS事件）的添加删除

首先在JS代码中加入对事先约定好的 ScriptMessage（JS事件）的调用

window.webkit.messageHandlers.<事件名>.postMessage(需要传递的数据)

同时OC端则需要加入对此JS事件的监听

例如：传递一个名为 @”sendModel” 的消息

window.webkit.messageHandlers.sendModel.postMessage()

OC端添加一个名为 @”sendModel” 的 JS的监听

[conntentController addScriptMessageHandler:self name:@"sendModel"];

这里就添加了对 @”sendModel” 的监听。但是当截获 此JS事件的时候需要作何处理，则需要在对应的协议方法中实现，则scriptMessageHandler需要实现协议WKScriptMessageHandler 会在稍后介绍。

移除对一个名为 @”sendModel” 的JS事件的监听

[conntentController removeScriptMessageHandlerForName:@"sendModel"];

WKScriptMessageHandler 协议

//当接收到一个ScriptMessage（JS事件）时调用

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

例如：处理名为 @”sendModel” 的事件

    /**

     * WKScriptMessageHandler,

     */

    //InjectedName：注入的名字，这里是 senderModel，需与前端开发人员协商该名称

    // WKScriptMessageHandler这个是注入js名称，在js端通过window.webkit.messageHandlers.{InjectedName}.postMessage()方法来发送消息到native。我们需要遵守此协议，然后实现其代理方法，就可以收到消息，并做相应处理。这个协议只有一个方法：

    funcuserContentController(_userContentController:WKUserContentController, didReceive message:WKScriptMessage) {

        //这里可以通过name处理多组交互

        ifmessage.name=="senderModel"{

            //body只支持NSNumber, NSString, NSDate, NSArray,NSDictionary 和 NSNull类型

            print("--WKScriptMessageHandler---\(message.body)")

        }

    }

二、OC调用JS

与UIWebView一样WKWebView可直接调用JS方法

WKWebView方法

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

同样需要事先得知JS端的方法名和对应操作的key值 

例如： 通知web某处理完成约定的 JS函数名为 function ，需要执行一个约定好的操作名为 action，则调用如下

[self.webView evaluateJavaScript:@"function('action')" completionHandler:nil];