iOS和JS交互教程之WKWebView-協(xié)議攔截的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下iOS和JS交互教程之WKWebView-協(xié)議攔截的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專業(yè)從事網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站,高端網(wǎng)站制作設(shè)計(jì),微信小程序,網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠服務(wù)，采用html5+CSS3前端渲染技術(shù)，響應(yīng)式網(wǎng)站建設(shè)，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項(xiàng)小組，與您實(shí)時(shí)在線互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。

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

  • 支持更多的HTML5的特性

  • 高達(dá)60fps滾動(dòng)刷新頻率與內(nèi)置手勢(shì)

  • 與Safari相容的JavaScript引擎

  • 在性能、穩(wěn)定性方面有很大提升占用內(nèi)存更少 協(xié)議方法及功能都更細(xì)致

  • 可獲取加載進(jìn)度等。

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

本文介紹通過 WKWebView協(xié)議攔截的方式實(shí)現(xiàn)iOS與JS交互。

WKWebView是Apple在iOS8推出的Webkit框架中的負(fù)責(zé)網(wǎng)頁的渲染與展示的類，相比UIWebView速度更快，占用內(nèi)存更少，支持更多的HTML特性。

一、JS調(diào)用iOS：

實(shí)現(xiàn)邏輯：點(diǎn)擊JS的登錄按鈕，JS將登錄成功后的token數(shù)據(jù)傳遞給iOS，iOS將收到的數(shù)據(jù)展示出來。

實(shí)現(xiàn)效果：

iOS和JS交互教程之WKWebView-協(xié)議攔截的示例分析
JS調(diào)用iOS實(shí)現(xiàn)效果

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調(diào)用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在每次加載請(qǐng)求前會(huì)調(diào)用此方法來確認(rèn)是否進(jìn)行請(qǐng)求跳轉(zhuǎn)
- (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);
  }
}

實(shí)現(xiàn)原理：

1、JS與iOS約定好jsToOc協(xié)議，用作JS在調(diào)用iOS時(shí)url的scheme；

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

3、iOS的WKWebView在請(qǐng)求跳轉(zhuǎn)前會(huì)調(diào)用-webView:decidePolicyForNavigationAction:decisionHandler:方法來確認(rèn)是否允許跳轉(zhuǎn)；

4、iOS在此方法內(nèi)截取jsToOc協(xié)議獲取JS傳過來的數(shù)據(jù)，用UIAlertController顯示出來，并通過decisionHandler不允許此請(qǐng)求跳轉(zhuǎn)。

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

二、iOS調(diào)用JS：

實(shí)現(xiàn)邏輯：點(diǎn)擊iOS的登錄按鈕，iOS將登錄成功后的token數(shù)據(jù)傳遞給JS，JS將收到的數(shù)據(jù)展示出來。

實(shí)現(xiàn)效果：

iOS和JS交互教程之WKWebView-協(xié)議攔截的示例分析
iOS調(diào)用JS實(shí)現(xiàn)效果

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調(diào)用JS入口
function ocToJs(action, params) {
 document.getElementById("returnValue").innerHTML = action + '?' + params;
}
//! iOS調(diào)用JS數(shù)據(jù)顯示框
<div id = "returnValue" style = "font-size: 18px; border: 1px dotted; height: 50px;"> </div>

實(shí)現(xiàn)原理：

1、iOS與JS約定好ocToJs方法，用作iOS在調(diào)用JS時(shí)的入口方法；

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

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

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

4、iOS通過completionHandler收到JS中ocToJs方法的回調(diào)。

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

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

以上是“iOS和JS交互教程之WKWebView-協(xié)議攔截的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文名稱：iOS和JS交互教程之WKWebView-協(xié)議攔截的示例分析-創(chuàng)新互聯(lián)
URL地址：http://bm7419.com/article20/ijgjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、面包屑導(dǎo)航、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)