iOS和JS交互教程之WKWebView-協議攔截詳解

更新時間：2018年09月26日 08:32:06 作者：QiShare

這篇文章主要給大家介紹了關于iOS和JS交互教程之WKWebView-協議攔截的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

由于Xcode8發(fā)布之后，編譯器開始不支持iOS 7了，這樣我們的app也改為最低支持iOS 8.0，既然需要與web交互，那自然也就選擇使用了 iOS 8.0之后才推出的新控件 WKWebView.

相比與 UIWebView, WKWebView 存在很多優(yōu)勢：

支持更多的HTML5的特性
高達60fps滾動刷新頻率與內置手勢
與Safari相容的JavaScript引擎
在性能、穩(wěn)定性方面有很大提升占用內存更少協議方法及功能都更細致
可獲取加載進度等。

先解釋下標題：“iOS與JS交互”。iOS指iOS原生代碼（文章只有OC示例），JS指WEB前端（不單指JavaScript），交互指JS調用iOS和iOS調用JS。

本文介紹通過 WKWebView協議攔截的方式實現iOS與JS交互。

WKWebView是Apple在iOS8推出的Webkit框架中的負責網頁的渲染與展示的類，相比UIWebView速度更快，占用內存更少，支持更多的HTML特性。

一、JS調用iOS：

實現邏輯：點擊JS的登錄按鈕，JS將登錄成功后的token數據傳遞給iOS，iOS將收到的數據展示出來。

實現效果：

JS調用iOS實現效果

JS代碼：

//! 登錄按鈕
<button onclick = "login()" style = "font-size: 18px;">登錄</button>

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

//! 登錄成功
function loginSucceed(token) {
 var action = "loginSucceed";
 jsToOc(action, token);
}

//! JS調用OC入口
function jsToOc(action, params) {
 var url = "jsToOc://" + action + "?" + params;
 loadURL(url);
}

//! 加載URL
function loadURL(url) {
 window.location.href = url;
}

iOS代碼：

#pragma mark - WKNavigationDelegate

//! WKWeView在每次加載請求前會調用此方法來確認是否進行請求跳轉
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
  
  if ([navigationAction.request.URL.scheme caseInsensitiveCompare:@"jsToOc"] == NSOrderedSame) {
    [WKWebViewInterceptController showAlertWithTitle:navigationAction.request.URL.host message:navigationAction.request.URL.query cancelHandler:nil];
    decisionHandler(WKNavigationActionPolicyCancel);
  }
  else {
    decisionHandler(WKNavigationActionPolicyAllow);
  }
}

實現原理：

1、JS與iOS約定好jsToOc協議，用作JS在調用iOS時url的scheme；

2、JS在登錄成功后加載含有token數據的url： (jsToOc://loginSucceed?js_tokenString)；

3、iOS的WKWebView在請求跳轉前會調用-webView:decidePolicyForNavigationAction:decisionHandler:方法來確認是否允許跳轉；

4、iOS在此方法內截取jsToOc協議獲取JS傳過來的數據，用UIAlertController顯示出來，并通過decisionHandler不允許此請求跳轉。

PS1：除了顯示截取到的數據，iOS還可以將navigationAction.request.URL.host看作JS想調用的方法名，將navigationAction.request.URL.query看作該方法的參數集，從而體現出JS調用iOS的概念。
PS2：在-webView:decidePolicyForNavigationAction:decisionHandler:方法中一定要調用decisionHandler回調來制定允許請求跳轉WKNavigationActionPolicyAllow或者不允許跳轉WKNavigationActionPolicyAllow，不然會崩潰。

二、iOS調用JS：

實現邏輯：點擊iOS的登錄按鈕，iOS將登錄成功后的token數據傳遞給JS，JS將收到的數據展示出來。

實現效果：

iOS調用JS實現效果

iOS代碼：

//! 登錄按鈕
UIBarButtonItem *loginBtnItem = [[UIBarButtonItem alloc] initWithTitle:@"登錄" style:UIBarButtonItemStylePlain target:self action:@selector(login:)];
self.navigationItem.rightBarButtonItems = @[loginBtnItem];

//! 登錄方法
- (void)login:(id)sender {
  
  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    [self.webView evaluateJavaScript:@"ocToJs('loginSucceed', 'oc_tokenString')" completionHandler:^(id response, NSError *error) {}];
  });
}

JS代碼：

//! iOS調用JS入口
function ocToJs(action, params) {
 document.getElementById("returnValue").innerHTML = action + '?' + params;
}

//! iOS調用JS數據顯示框
<div id = "returnValue" style = "font-size: 18px; border: 1px dotted; height: 50px;"> </div>

實現原理：

1、iOS與JS約定好ocToJs方法，用作iOS在調用JS時的入口方法；

2、iOS在登錄成功后以loginSucceed和oc_tokenString為參數拼接JS代碼ocToJs('loginSucceed', 'oc_tokenString');

3、iOS使用WKWebView的-evaluateJavaScript:completionHandler:方法執(zhí)行拼接好的JS代碼；

3、JS在ocToJs方法中將iOS傳過來的數據顯示在div元素中；

4、iOS通過completionHandler收到JS中ocToJs方法的回調。

PS：WKWebView的-evaluateJavaScript:completionHandler:方法可以執(zhí)行JS代碼。但只有在整個webView加載完成之后調用此方法才會有響應。比如：我們可以通過如下方式獲取JS的標題。

//! WKWebView在每次加載請求完成后會調用此方法
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
  
  [webView evaluateJavaScript:@"document.title" completionHandler:^(NSString *title, NSError *error) {
    self.title = title;
  }];
}

可從QiShare的Github獲取工程源碼（本地下載）

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: