iOS與JS互動之UIWebView協議攔截

QiShare發表於2018-08-28
iOSJSUIWebView協議

級別：★★☆☆☆c
標籤：「iOS與JS互動」「OC與JS互動」「UIWebView與JS互動」
作者： Xs·H
審校： QiShare團隊

先解釋下標題：“iOS與JS互動”。iOS指iOS原生程式碼（文章只有OC示例），JS指WEB前端（不單指JavaScript），互動指JS呼叫iOS和iOS呼叫JS。 通常情況下，iOS與JS可通過四種方式進行互動。作者將通過四篇文章逐一介紹。

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

一、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 - UIWebViewDelegate

//! UIWebView在每次載入請求前會呼叫此方法來確認是否載入此請求
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    
    if ([request.URL.scheme caseInsensitiveCompare:@"jsToOc"] == NSOrderedSame) {
        [self.class showAlertWithTitle:request.URL.host message:request.URL.query cancelHandler:nil];
        return NO;
    }
    
    return YES;
}
複製程式碼
  • 實現原理：
    1、JS與iOS約定好jsToOc協議，用作JS在呼叫iOS時url的scheme；
    2、JS在登入成功後載入含有token資料的url：(jsToOc://loginSucceed?js_tokenString)；
    3、iOS的UIWebView在載入請求前都會呼叫-webView:shouldStartLoadWithRequest:navigationType:方法來確認是否載入此請求；
    4、iOS在此方法內擷取jsToOc協議獲取JS傳過來的資料，用UIAlertController顯示出來，並不允許載入此請求。

PS：除了顯示擷取到的資料，iOS還可以將request.URL.host看作JS想呼叫的方法名，將request.URL.query看作該方法的引數集，從而體現出JS呼叫iOS的概念。

二、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(), ^{
        NSString *jsString = [NSString stringWithFormat:@"ocToJs('loginSucceed', 'oc_tokenString')"];
        [self.webView stringByEvaluatingJavaScriptFromString:jsString];
    });
}
複製程式碼
  • 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使用UIWebView的-stringByEvaluatingJavaScriptFromString:方法訪問JS；
    2、iOS與JS約定好ocToJs方法，用作iOS在呼叫JS時的入口方法；
    3、iOS在登入成功後以loginSucceed和oc_tokenString為引數訪問ocToJs方法；
    4、JS在ocToJs方法中將iOS傳過來的資料顯示在div元素中。

PS：UIWebView的-stringByEvaluatingJavaScriptFromString:方法可以執行JavaScript程式碼。但只有在整個webView載入完成之後-webViewDidFinishLoad:呼叫此方法才會有響應。比如：我們可以通過如下方式獲取JS的標題。

//! UIWebView在每次載入請求完成後會呼叫此方法
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    
    self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
}
複製程式碼

可從Github獲取工程原始碼

關注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)

推薦文章：
W3C規範標準化流程
糖是甜的，你也是: 致async

相關文章