iOS下OC與JS的交互(WKWebview-MessageHandler實現(xiàn))

在開發(fā)過程中，iOS 中實現(xiàn)加載 web 頁面主要有兩種控件，UIWebView 和 WKWebview，兩種控件對應(yīng)具體的實現(xiàn)方法不同。WKWebView是蘋果公司在iOS8系統(tǒng)推出的，這里我們主要概述WebKit中更新的WKWebView控件的新特性與使用方法。

一、 WKWebView的代理方法

  1. WKNavigationDelegate
    該代理提供的方法，可以用來追蹤加載過程（頁面開始加載、加載完成、加載失敗）、決定是否執(zhí)行跳轉(zhuǎn)。
// 頁面開始加載時調(diào)用
-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;

// 當(dāng)內(nèi)容開始返回時調(diào)用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;

// 頁面加載完成之后調(diào)用
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;

// 頁面加載失敗時調(diào)用
 -(void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;

頁面跳轉(zhuǎn)的代理方法有三種，分為（收到跳轉(zhuǎn)與決定是否跳轉(zhuǎn)兩種）：

 // 接收到服務(wù)器跳轉(zhuǎn)請求之后調(diào)用
 -(void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;

 // 在收到響應(yīng)后，決定是否跳轉(zhuǎn)
 -(void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;

// 在發(fā)送請求之前，決定是否跳轉(zhuǎn)
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

2.WKUIDelegate

   //創(chuàng)建一個新的webView
   -(WKWebView**)webView:(WKWebView***)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;

下面代理方法全都是與界面彈出提示框相關(guān)的，針對于web界面的三種提示框（警告框、確認(rèn)框、輸入框）分別對應(yīng)三種代理方法。下面只列舉了警告框的方法。

-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler;

3.WKScriptMessageHandler

   // 從web界面中接收到一個腳本時調(diào)用

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

四、WKWebView加載JS

NSString *js = @"";

// 根據(jù)JS字符串初始化WKUserScript對象

WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];

// 根據(jù)生成的WKUserScript對象，初始化WKWebViewConfiguration

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
[config.userContentController addUserScript:script];

下面開始進入正題

1. 首先需要引入WebKit庫

   #import <WebKit/WebKit.h>

2.MessageHandler
創(chuàng)建WKWebViewConfiguration，配置各個API對應(yīng)的MessageHandler

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKUserContentController *userContentController = [[WKUserContentController alloc] init];

[userContentController addScriptMessageHandler:self name:@"Share"];
[userContentController addScriptMessageHandler:self name:@"Camera"];
configuration.userContentController = userContentController;

WKPreferences *preferences = [WKPreferences new];
preferences.javaScriptCanOpenWindowsAutomatically = YES;
preferences.minimumFontSize = 40.0;
configuration.preferences = preferences;

3.創(chuàng)建WKWebView
//loadFileURL方法通常用于加載服務(wù)器的HTML頁面或者JS，而loadHTMLString通常用于加載本地HTML或者JS

NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"WKWebViewMessageHandler" ofType:@"html"];
NSString *fileURL = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
[self.webView loadHTMLString:fileURL baseURL:baseURL];
self.webView.UIDelegate = self;
[self.view addSubview:self.webView];

4.實現(xiàn)協(xié)議方法

#pragma mark -- WKScriptMessageHandler
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
//JS調(diào)用OC方法
//message.boby就是JS里傳過來的參數(shù)
NSLog(@"body:%@",message.body);

if ([message.name isEqualToString:@"Share"]) {
    [self ShareWithInformation:message.body];
    
} else if ([message.name isEqualToString:@"Camera"]) {
    [self camera];
}
}

WKScriptMessage有兩個關(guān)鍵屬性name 和 body。因為我們給每一個OC方法取了一個name，所以就可以根據(jù)name 來區(qū)分執(zhí)行不同的方法。body 中存著JS 要給OC 傳的參數(shù)。

#pragma mark - Method
-(void)ShareWithInformation:(NSDictionary *)dic
{
if (![dic isKindOfClass:[NSDictionary class]]) {
    return;
}
NSString *title = [dic objectForKey:@"title"];
NSString *content = [dic objectForKey:@"content"];
NSString *url = [dic objectForKey:@"url"];

//在這里寫分享操作的代碼
NSLog(@"要分享了哦??");

//OC反饋給JS分享結(jié)果
NSString *JSResult = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];

//OC調(diào)用JS
[self.webView evaluateJavaScript:JSResult completionHandler:^(id _Nullable result, NSError * _Nullable error) {
    NSLog(@"%@", error);
}];
}

-(void)camera
{
//在這里寫調(diào)用打開相冊的代碼
[self selectImageFromPhotosAlbum];
}

4.HTML文件中JS調(diào)用代碼

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8">
        <script language="javascript">

        //JS執(zhí)行window.webkit.messageHandlers.Share.postMessage(<messageBody>)
        function shareClick() {
            window.webkit.messageHandlers.Share.postMessage({title:'測試分享的標(biāo)題',content:'測試分享的內(nèi)容',url:'https://github.com/maying1992'});
        }
        
        //分享回調(diào)結(jié)果顯示
        function shareResult(channel_id,share_channel,share_url) {
            var content = channel_id+","+share_channel+","+share_url;
            alert(content);
            document.getElementById("returnValue").value = content;
        }
        
        //JS執(zhí)行window.webkit.messageHandlers.Camera.postMessage(<messageBody>)
        function cameraClick() {
            window.webkit.messageHandlers.Camera.postMessage(null);
        }
        
        //調(diào)用相冊回調(diào)結(jié)果顯示
        function cameraResult(result) {
            alert(result);
            document.getElementById("returnValue").value = result;
        }
            </script>
        </head>

<body>
    <h1>這是按鈕調(diào)用</h1>
    <input type="button" value="分享" onclick="shareClick()" />
    <input type="button" value="相機" onclick="cameraClick()" />

    <h1>回調(diào)展示區(qū)</h1>
    <textarea id ="returnValue" type="value" rows="5" cols="40">
        
    </textarea>
</body>
</html>

代碼解釋：

 在中JS 執(zhí)行window.webkit.messageHandlers.<name>.postMessage(<messageBody>)時，OC端被添加的ScriptMessageHandler就會執(zhí)行實現(xiàn)的WKScriptMessageHandler協(xié)議的方法 即

-(void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message
{
}

這樣在代理方法里面實現(xiàn)相應(yīng)本地原生方法的代碼，就完成了JS調(diào)用OC本地的過程。

5.OC調(diào)用JS

NSString *JSResult = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
[self.webView evaluateJavaScript:JSResult completionHandler:^(id _Nullable result, NSError * _Nullable error) {
    NSLog(@"%@", error);
}];

代碼解釋：
通過 -evaluateJavaScript:completionHandler:實現(xiàn)OC調(diào)用JS，跟JavaScriptCore中的evaluateScript方法類似。

效果圖：
點擊分享按鈕

屏幕快照 2016-10-13 下午2.56.37.png

點擊相機按鈕

屏幕快照 2016-10-13 下午2.57.20.png
屏幕快照 2016-10-13 下午2.57.35.png

總結(jié)：
WKWebView新特性

1.在性能、穩(wěn)定性、功能方面有很大提升（最直觀的體現(xiàn)就是加載網(wǎng)頁是占用的內(nèi)存，模擬器加載百度與開源中國網(wǎng)站時，WKWebView占用23M，而UIWebView占用85M）；
2.允許JavaScript的Nitro庫加載并使用（UIWebView中限制）；
3.支持了更多的HTML5特性；
4.高達60fps的滾動刷新率以及內(nèi)置手勢；
5.將UIWebViewDelegate與UIWebView重構(gòu)成了14類與3個協(xié)議。

WKWebview-MessageHandler 、WebViewJavaScriptBridge、JavaScriptCore優(yōu)缺點

1.WebViewJavaScriptBridge缺點就是要固定的加入相關(guān)代碼，JS端代碼要在固定的函數(shù)內(nèi)添加，使用攔截協(xié)議URL的方式傳遞參數(shù)需要把參數(shù)拼接在后面，遇到要傳遞的參數(shù)有特殊字符，例如& 、= 、？等解析容易出問題;
bridge.callHandler('callme', {'blogURL': 'https://github.com/maying1992&content=每天都是好心情&img=圖片'}, function(response) {
         log('JS端 得到 response', response)
2.WKWebview-MessageHandler在JS中寫起來更簡單一點，JS傳遞參數(shù)更方便，減少參數(shù)中特殊字符引起的錯誤,WKWebView在性能、穩(wěn)定性方面更加強大；
3.JavaScriptCore使用起來比較簡單，方便web端和移動端的統(tǒng)一。

源碼
喜歡的親們隨手給個星星

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容