iOS與JS交互之UIWebView協議攔截

級別：★★☆☆☆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交互。

1、JS調用iOS：

• 實現邏輯：點擊JS的登陸按鈕，JS將登陸成功後的token數據傳遞給iOS，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;
}
複製代碼

• 實現原理：
  一、JS與iOS約定好jsToOc協議，用做JS在調用iOS時url的scheme；
  二、JS在登陸成功後加載含有token數據的url：(jsToOc://loginSucceed?js_tokenString)；
  三、iOS的UIWebView在加載請求前都會調用-webView:shouldStartLoadWithRequest:navigationType:方法來確認是否加載此請求；
  四、iOS在此方法內截取jsToOc協議獲取JS傳過來的數據，用UIAlertController顯示出來，並不容許加載此請求。
  

PS：除了顯示截取到的數據，iOS還能夠將request.URL.host看做JS想調用的方法名，將request.URL.query看做該方法的參數集，從而體現出JS調用iOS的概念。

---

2、iOS調用JS：

• 實現邏輯：點擊iOS的登陸按鈕，iOS將登陸成功後的token數據傳遞給JS，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>
複製代碼

• 實現原理：
  一、iOS使用UIWebView的-stringByEvaluatingJavaScriptFromString:方法訪問JS；
  二、iOS與JS約定好ocToJs方法，用做iOS在調用JS時的入口方法；
  三、iOS在登陸成功後以loginSucceed和oc_tokenString爲參數訪問ocToJs方法；
  四、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