WKWebView OC和JS互動
阿新 • • 發佈：2019-01-27
網頁很簡單，只有一個按鈕，點選按鈕會觸發一個方法，在事件的方法中通過呼叫 window.webkit.messageHandlers.NativeModel.postMessage({name: 'zhangyutang', age: 12}); 把訊息傳送給OC。OC中需要注入相同名稱的model：NativeModel。
網頁程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5page-oc</title> <script> function btn1Click() { window.webkit.messageHandlers.NativeModel.postMessage({name: 'zhangyutang', age: 12}); alert("after call"); } </script> </head> <body> <input type="button" value="button c" onclick="btn1Click()"> </body> </html>
程式碼實現，通過設定 WKWebViewConfiguration 的 addScriptMessageHandler:name 來設定JS事件的接收處理器，這邊設定為當前物件self，這裡的name需要設定為JS中的呼叫的Model：NativeModel 。
WKWebViewConfiguration* config = [[WKWebViewConfiguration alloc] init]; config.userContentController = [WKUserContentController new]; [config.userContentController addScriptMessageHandler:self name:@"NativeModel"]; _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config]; _webView.translatesAutoresizingMaskIntoConstraints = NO; _webView.backgroundColor = [UIColor whiteColor]; _webView.UIDelegate = self; _webView.navigationDelegate = self; [self.view addSubview:_webView];
實現 WKScriptMessageHandler 的回撥方法 userContentController:didReceiveScriptMessage ，在這邊處理JS的方法呼叫。
#pragma mark - ......::::::: WKScriptMessageHandler :::::::...... - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { id body = message.body; NSLog(@"=== %@", body); }