ios下OC与JS交互之WKWebView

更新时间：2017年03月07日 10:15:25 作者：流浪_先生

本篇文章主要介绍了ios下OC与JS交互之WKWebView，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

上一篇文章我们使用了JavaScriptCore框架重写了之前的示例，iOS8苹果偏爱HTML5，重构了UIWebVIew，给我们带来了WKWebView，使其性能、稳定性、功能大幅度提升，也更好的支持了HTML5的新特性。这篇文章就们就拿WKWebView来小试牛刀

一、WKWebView Framework

WKWebView的14个类与3个协议：

WKBackForwardList: 之前访问过的 web 页面的列表，可以通过后退和前进动作来访问到。

WKBackForwardListItem: webview 中后退列表里的某一个网页。

WKFrameInfo: 包含一个网页的布局信息。

WKNavigation: 包含一个网页的加载进度信息。

WKNavigationAction: 包含可能让网页导航变化的信息，用于判断是否做出导航变化。

WKNavigationResponse: 包含可能让网页导航变化的返回内容信息，用于判断是否做出导航变化。

WKPreferences: 概括一个 webview 的偏好设置。

WKProcessPool: 表示一个 web 内容加载池。

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

WKScriptMessage: 包含网页发出的信息。

WKUserScript: 表示可以被网页接受的用户脚本。

WKWebViewConfiguration: 初始化 webview 的设置。

WKWindowFeatures: 指定加载新网页时的窗口属性。

WKWebsiteDataStore: 包含网页数据存储和查找。

WKNavigationDelegate: 提供了追踪主窗口网页加载过程和判断主窗口和子窗口是否进行页面加载新页面的相关方法。

WKUIDelegate: 提供用原生控件显示网页的方法回调。

WKScriptMessageHandler: 提供从网页中收消息的回调方法。

二、WKWebView中的三个代理方法

1. WKNavigationDelegate

该代理提供的方法，可以用来追踪加载过程（页面开始加载、加载完成、加载失败）、决定是否执行跳转。

// 页面开始加载时调用

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

// 当内容开始返回时调用

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

// 页面加载完成之后调用

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

// 页面加载失败时调用

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

页面跳转的代理方法有三种，分为（收到跳转与决定是否跳转两种）

// 接收到服务器跳转请求之后调用

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

// 在收到响应后，决定是否跳转

- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;

// 在发送请求之前，决定是否跳转

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

2. WKUIDelegate

创建一个新的WKWebView

// 创建一个新的WebView

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

剩下三个代理方法全都是与界面弹出提示框相关的，针对于web界面的三种提示框（警告框、确认框、输入框）分别对应三种代理方法。

// 界面弹出警告框

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

// 界面弹出确认框

- (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

这个协议中包含一个必须实现的方法，这个方法是native与web端交互的关键，它可以直接将接收到的JS脚本转为OC或Swift对象。

// 从web界面中接收到一个脚本时调用

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

三、使用WKWebView重写

这里我们和之前的界面做了一点改动，之前OC调用JS的时候是进行弹框处理，这里我在写的时候，很郁闷，方法可以调用过去，但是唯独js的alert方法调用没有效果，所以这里采用了输出到div的形式，并增加了一个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调用OC 添加处理脚本

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

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

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

 

// 在代理方法中处理对应事件

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

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

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

 

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

    [self showMsg:@"我是下面的小红 手机号是: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:@"这是我的手机号: %@, %@ !!",array.firstObject,array.lastObject];

    [self showMsg:info];

  }

}

 

// 2. native调用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调用JS的方法列表

function alertMobile() {

  //这里已经调用过来了 但是搞不明白为什么alert方法没有响应

  //alert('我是上面的小黄 手机号是:13300001111')

  document.getElementById('mobile').innerHTML = '我是上面的小黄 手机号是:13300001111'

}

 

function alertName(msg) {

  //alert('你好 ' + msg + ', 我也很高兴见到你')

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

}

 

function alertSendMsg(num,msg) {

  //window.alert('这是我的手机号:' + num + ',' + msg + '!!')

  document.getElementById('msg').innerHTML = '这是我的手机号:' + num + ',' + msg + '!!'

}

 

//JS响应方法列表

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 !!!'])

}

四、后记

至此，整个系列的示例已完成，过程中收货颇丰。每篇文章都会对知识点进行总结，在文章末尾给出示例DEMO的地址。

示例DEMO：OC-JS-WKWebView_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

IOS中NSPredicate和NSRegularExpression校验正则表达式区别
本文文章通过实例代码给大家讲述了在IOS开发中NSPredicate和NSRegularExpression校验正则表达式区别，需要的朋友赶快学习下吧。
2018-01-01
IOS CocoaPods详细使用方法
自从有了CocoaPods以后，这些繁杂的工作就不再需要我们亲力亲为了，只需要我们做好少量的配置工作，CocoaPods会为我们做好一切
2016-09-09
iOS文字渐变色效果的实现方法
在大家日常开发iOS的过程中，可能会遇到要实现文字渐变色的效果，这篇文章文章通过示例代码和详细的步骤介绍了如何利用iOS实现文字渐变色的效果，实现后的很不错，感兴趣的朋友们下面来一起看看吧。
2016-10-10
iOS客户端本地推送实现代码
这篇文章主要介绍了iOS客户端本地推送实现代码，并确定程序中只有一个弹出框,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
iOS开发中CALayer使用的基本教程
这篇文章主要介绍了iOS开发中CALayer使用的基本教程,代码基于传统的Objective-C，需要的朋友可以参考下
2015-11-11
Objective-C关键字@property使用原理探究
这篇文章主要为大家介绍了Objective-C关键字@property使用原理探究，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
iOS图片模糊效果的实现方法
这篇文章主要为大家详细介绍了iOS图片模糊效果的三种实现方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
iOS开发生成二维码图片(附中间带有小图标二维码)
这篇文章主要介绍了iOS开发生成二维码图片(附中间带有小图标二维码)的方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017-10-10
iOS开发状态栏及设置功能全面详解
这篇文章主要为大家介绍了iOS开发状态栏及设置功能全面详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
iOS开发实现下载器的基本功能(1)
这篇文章主要为大家详细介绍了iOS开发实现下载器基本功能的相关资料，感兴趣的小伙伴们可以参考一下
2016-07-07