iOS與JS交互之WKWebView-WKScriptMessageHandler協議

時間 2019-11-25

標籤 ios 交互 wkwebview wkscriptmessagehandler 協議欄目 iOS 简体版

原文原文鏈接

級別：★★☆☆☆
標籤：「iOS與JS交互」「WKWebView與JS交互」「WKJSMessageHandler」
做者： Xs·H
審校： QiShare團隊php

先解釋下標題：「iOS與JS交互」。iOS指iOS原生代碼（文章只有OC示例），JS指WEB前端（不單指JavaScript），交互指JS調用iOS和iOS調用JS。做者將iOS與JS交互總結成了6種方式，並將逐一介紹。目錄以下：前端

本文介紹若是使用WKWebView的WKScriptMessageHandler實現iOS與JS交互。 WKWebView是Apple在iOS8推出的Webkit框架中的負責網頁的渲染與展現的類，相比UIWebView速度更快，佔用內存更少，支持更多的HTML特性。WKScriptMessageHandler是WebKit提供的一種在WKWebView上進行JS消息控制的協議。git

1、JS調用iOS：

實現邏輯：點擊JS的登陸按鈕，JS將登陸成功後的token數據傳遞給iOS，iOS將收到的數據展現出來。github
實現效果： web
JS代碼：bash

//! 登陸按鈕
<button onclick = "login()" style = "font-size: 18px;">登陸</button>
複製代碼

//! 登陸
function login() {
  var token = "js_tokenString";
  loginSucceed(token);
}

//! 登陸成功
function loginSucceed(token) {
  var action = "loginSucceed";
  window.webkit.messageHandlers.jsToOc.postMessage(action, token);
}
複製代碼

iOS代碼：

//! 導入WebKit框架頭文件
#import <WebKit/WebKit.h>

//! WKWebViewWKScriptMessageHandlerController遵照WKScriptMessageHandler協議
@interface WKWebViewWKScriptMessageHandlerController () <WKScriptMessageHandler>
複製代碼

//! 爲userContentController添加ScriptMessageHandler，並指明name
WKUserContentController *userContentController = [[WKUserContentController alloc] init];
[userContentController addScriptMessageHandler:self name:@"jsToOc"];

//! 使用添加了ScriptMessageHandler的userContentController配置configuration
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.userContentController = userContentController;

//! 使用configuration對象初始化webView
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
複製代碼

#pragma mark - WKScriptMessageHandler

//! WKWebView收到ScriptMessage時回調此方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    
    if ([message.name caseInsensitiveCompare:@"jsToOc"] == NSOrderedSame) {
        [WKWebViewWKScriptMessageHandlerController showAlertWithTitle:message.name message:message.body cancelHandler:nil];
    }
}
複製代碼

實現原理：
一、JS與iOS約定好jsToOc方法，用做JS在調用iOS時的方法；
二、iOS使用WKUserContentController的-addScriptMessageHandler:name:方法監聽name爲jsToOc的消息；
三、JS經過window.webkit.messageHandlers.jsToOc.postMessage()的方式對jsToOc方法發送消息；
四、iOS在-userContentController:didReceiveScriptMessage:方法中讀取name爲jsToOc的消息數據message.body。

PS：[userContentController addScriptMessageHandler:self name:@"jsToOc"]會引發循環引用問題。通常來講，在合適的時機removeScriptMessageHandler能夠解決此問題。好比：在-viewWillAppear:方法中執行add操做，在-viewWillDisappear:方法中執行remove操做。以下：微信

- (void)viewWillAppear:(BOOL)animated {
    
    [super viewWillAppear:animated];
    
    [_webView.configuration.userContentController addScriptMessageHandler:self name:@"jsToOc"];
}

- (void)viewWillDisappear:(BOOL)animated {
    
    [super viewWillDisappear:animated];
    
    [_webView.configuration.userContentController removeScriptMessageHandlerForName:@"jsToOc"];
}
複製代碼