ios下OC與JS交互之WKWebView

更新時(shí)間：2017年03月07日 10:15:25 作者：流浪_先生

本篇文章主要介紹了ios下OC與JS交互之WKWebView，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

上一篇文章我們使用了JavaScriptCore框架重寫了之前的示例，iOS8蘋果偏愛HTML5，重構(gòu)了UIWebVIew，給我們帶來(lái)了WKWebView，使其性能、穩(wěn)定性、功能大幅度提升，也更好的支持了HTML5的新特性。這篇文章就們就拿WKWebView來(lái)小試牛刀

一、WKWebView Framework

WKWebView的14個(gè)類與3個(gè)協(xié)議：

WKBackForwardList: 之前訪問(wèn)過(guò)的 web 頁(yè)面的列表，可以通過(guò)后退和前進(jìn)動(dòng)作來(lái)訪問(wèn)到。

WKBackForwardListItem: webview 中后退列表里的某一個(gè)網(wǎng)頁(yè)。

WKFrameInfo: 包含一個(gè)網(wǎng)頁(yè)的布局信息。

WKNavigation: 包含一個(gè)網(wǎng)頁(yè)的加載進(jìn)度信息。

WKNavigationAction: 包含可能讓網(wǎng)頁(yè)導(dǎo)航變化的信息，用于判斷是否做出導(dǎo)航變化。

WKNavigationResponse: 包含可能讓網(wǎng)頁(yè)導(dǎo)航變化的返回內(nèi)容信息，用于判斷是否做出導(dǎo)航變化。

WKPreferences: 概括一個(gè) webview 的偏好設(shè)置。

WKProcessPool: 表示一個(gè) web 內(nèi)容加載池。

WKUserContentController: 提供使用 JavaScript post 信息和注射 script 的方法。

WKScriptMessage: 包含網(wǎng)頁(yè)發(fā)出的信息。

WKUserScript: 表示可以被網(wǎng)頁(yè)接受的用戶腳本。

WKWebViewConfiguration: 初始化 webview 的設(shè)置。

WKWindowFeatures: 指定加載新網(wǎng)頁(yè)時(shí)的窗口屬性。

WKWebsiteDataStore: 包含網(wǎng)頁(yè)數(shù)據(jù)存儲(chǔ)和查找。

WKNavigationDelegate: 提供了追蹤主窗口網(wǎng)頁(yè)加載過(guò)程和判斷主窗口和子窗口是否進(jìn)行頁(yè)面加載新頁(yè)面的相關(guān)方法。

WKUIDelegate: 提供用原生控件顯示網(wǎng)頁(yè)的方法回調(diào)。

WKScriptMessageHandler: 提供從網(wǎng)頁(yè)中收消息的回調(diào)方法。

二、WKWebView中的三個(gè)代理方法

1. WKNavigationDelegate

該代理提供的方法，可以用來(lái)追蹤加載過(guò)程（頁(yè)面開始加載、加載完成、加載失敗）、決定是否執(zhí)行跳轉(zhuǎn)。

// 頁(yè)面開始加載時(shí)調(diào)用

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;

// 當(dāng)內(nèi)容開始返回時(shí)調(diào)用

- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;

// 頁(yè)面加載完成之后調(diào)用

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;

// 頁(yè)面加載失敗時(shí)調(diào)用

- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;

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

// 接收到服務(wù)器跳轉(zhuǎn)請(qǐng)求之后調(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ā)送請(qǐng)求之前，決定是否跳轉(zhuǎn)

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

2. WKUIDelegate

創(chuàng)建一個(gè)新的WKWebView

// 創(chuàng)建一個(gè)新的WebView

- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;

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

// 界面彈出警告框

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

// 界面彈出確認(rèn)框

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;

// 界面彈出輸入框

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;

3. WKScriptMessageHandler

這個(gè)協(xié)議中包含一個(gè)必須實(shí)現(xiàn)的方法，這個(gè)方法是native與web端交互的關(guān)鍵，它可以直接將接收到的JS腳本轉(zhuǎn)為OC或Swift對(duì)象。

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

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

三、使用WKWebView重寫

這里我們和之前的界面做了一點(diǎn)改動(dòng)，之前OC調(diào)用JS的時(shí)候是進(jìn)行彈框處理，這里我在寫的時(shí)候，很郁悶，方法可以調(diào)用過(guò)去，但是唯獨(dú)js的alert方法調(diào)用沒有效果，所以這里采用了輸出到div的形式，并增加了一個(gè)clear按鈕

WKWebView不支持nib文件，所以這里需要使用代碼初始化并加載WebView

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];

config.preferences.minimumFontSize = 18;

 

self.wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height/2) configuration:config];

[self.view addSubview:self.wkWebView];

 

 

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];

NSURL *baseURL = [[NSBundle mainBundle] bundleURL];

[self.wkWebView loadHTMLString:[NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil] baseURL:baseURL];

OC端：

//1. JS調(diào)用OC 添加處理腳本

[userCC addScriptMessageHandler:self name:@"showMobile"];

[userCC addScriptMessageHandler:self name:@"showName"];

[userCC addScriptMessageHandler:self name:@"showSendMsg"];

 

// 在代理方法中處理對(duì)應(yīng)事件

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

  NSLog(@"%@",NSStringFromSelector(_cmd));

  NSLog(@"%@",message.body);

 

  if ([message.name isEqualToString:@"showMobile"]) {

    [self showMsg:@"我是下面的小紅 手機(jī)號(hào)是:18870707070"];

  }

   

  if ([message.name isEqualToString:@"showName"]) {

    NSString *info = [NSString stringWithFormat:@"你好 %@, 很高興見到你",message.body];

    [self showMsg:info];

  }

   

  if ([message.name isEqualToString:@"showSendMsg"]) {

    NSArray *array = message.body;

    NSString *info = [NSString stringWithFormat:@"這是我的手機(jī)號(hào): %@, %@ !!",array.firstObject,array.lastObject];

    [self showMsg:info];

  }

}

 

// 2. native調(diào)用js

- (IBAction)btnClick:(UIButton *)sender {

  if (!self.wkWebView.loading) {

    if (sender.tag == 123) {

      [self.wkWebView evaluateJavaScript:@"alertMobile()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {

        //TODO

        NSLog(@"%@ %@",response,error);

      }];

    }

     

    if (sender.tag == 234) {

      [self.wkWebView evaluateJavaScript:@"alertName('小紅')" completionHandler:nil];

    }

     

    if (sender.tag == 345) {

      [self.wkWebView evaluateJavaScript:@"alertSendMsg('18870707070','周末爬山真是件愉快的事情')" completionHandler:nil];

    }

 

  } else {

    NSLog(@"the view is currently loading content");

  }

}

JS端：

function clear() {

  document.getElementById('mobile').innerHTML = ''

  document.getElementById('name').innerHTML = ''

  document.getElementById('msg').innerHTML = ''

}

 

//OC調(diào)用JS的方法列表

function alertMobile() {

  //這里已經(jīng)調(diào)用過(guò)來(lái)了 但是搞不明白為什么alert方法沒有響應(yīng)

  //alert('我是上面的小黃 手機(jī)號(hào)是:13300001111')

  document.getElementById('mobile').innerHTML = '我是上面的小黃 手機(jī)號(hào)是:13300001111'

}

 

function alertName(msg) {

  //alert('你好 ' + msg + ', 我也很高興見到你')

  document.getElementById('name').innerHTML = '你好 ' + msg + ', 我也很高興見到你'

}

 

function alertSendMsg(num,msg) {

  //window.alert('這是我的手機(jī)號(hào):' + num + ',' + msg + '!!')

  document.getElementById('msg').innerHTML = '這是我的手機(jī)號(hào):' + num + ',' + msg + '!!'

}

 

//JS響應(yīng)方法列表

function btnClick1() {

  window.webkit.messageHandlers.showMobile.postMessage(null)

}

 

function btnClick2() {

  window.webkit.messageHandlers.showName.postMessage('xiao黃')

}

 

function btnClick3() {

  window.webkit.messageHandlers.showSendMsg.postMessage(['13300001111', 'Go Climbing This Weekend !!!'])

}

四、后記

至此，整個(gè)系列的示例已完成，過(guò)程中收貨頗豐。每篇文章都會(huì)對(duì)知識(shí)點(diǎn)進(jìn)行總結(jié)，在文章末尾給出示例DEMO的地址。

示例DEMO：OC-JS-WKWebView_jb51.rar

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: