浅谈WKWebView用、JS的交互

  • 时间:2018-07-09 22:24 作者:程序员小新人学习 来源:程序员小新人学习 阅读:397
  • 扫一扫,手机访问
摘要:前言WKWebView是iOS8 出来的浏览器控件,使用来取代UIWebView.对于WKWebView与UIWebView的比照特点,这里就不过多的叙述,都算是老生常谈的问题了,网上的说明也很多.近来在做Web端,需要植入手机端,并且做JS交互工作.以前写过的JavaScript:浅谈iOS与H5

前言


WKWebView是iOS8 出来的浏览器控件,使用来取代UIWebView.对于WKWebView与UIWebView的比照特点,这里就不过多的叙述,都算是老生常谈的问题了,网上的说明也很多.近来在做Web端,需要植入手机端,并且做JS交互工作.以前写过的JavaScript:浅谈iOS与H5的交互-JavaScriptCore框架是使用于UIWebView.在WKWebView并不适使用了,自己做的过程中遇到少量坑,在这里总结一下,做一下记录.

WKWebView加载本地 html文件


现在的项目要求就是用存储在本地的html文件 js文件 css文件 img图片等文件.我用HBuilder创立了一个Demo工程.里面包含了基本的文件以及图片资源.如下所示.而后拖到Xcode工程中.

浅谈WKWebView用、JS的交互

而后我们把整个Html工程文件夹导入工程中.

浅谈WKWebView用、JS的交互

WKWebView 在iOS 9 有新的加载本地方法- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));.但是我看了网上有少量博客说- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;并不可以加载本地html文件.其实两者都可以加载.只是需要把路径写对.第一个方法就不过多叙述了.网上有很多的博客.这里我就使用第二个方法来看一下如何加载.

NSString *path = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"index.html"];

NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];

[_mainWebView loadRequest: request];

  • 1
  • 2
  • 3

运行效果图如下.

浅谈WKWebView用、JS的交互

Xcode工程中 html文件 加载js文件 css文件 img文件


上面我们加载了html.可是css样式 .img文件和js文件都没有加载出来.那么我们该如何处理呢?(html原始加载图如下所示.)

浅谈WKWebView用、JS的交互

对于css文件img文件 ,js文件我们只要要把html文件中的文件夹路径删除就可.如下所示.

浅谈WKWebView用、JS的交互

浅谈WKWebView用、JS的交互

浅谈WKWebView用、JS的交互

???????? 注意:这里是用的- (WKNavigation *)loadRequest:(NSURLRequest *)request;方式加载的网页.所有如上设置就可.假如用的是loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL或者者loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;都需要设置本地资源文件所对应的路径! 我们只要要把资源文件所对应的路径设置给readAccessURL 和 baseURL就可(). 例如下面所示.

//假定都在工程根目录之下.

NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];

[_mainWebView loadHTMLString:[self loadHtmlString] baseURL:baseURL];

  • 1
  • 2
  • 3

对于js文件,有时候我们发现我们就算如上删除了js文件夹的路径仍然不可以用.这是为什么呢?.这里就要去检测查看工程的设置,能否把js文件当成一个可编译文件用了.我们需要把它移动到资源文件中.这样就可以正常加载了.如下图所示.

浅谈WKWebView用、JS的交互

WKWebView中警告窗 确认面板 输入框的显示


相比于UIWebView,WKWebView对警告窗 确认面板 输入框并不可以直接显示.是通过WKUIDelegate代理商方法收到对应的回调方法.如下所示.

//接收到警告面板

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(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;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

我们只要要对上面的回调方法进行实现就可实现显示警告窗 确认面板 输入框等需求.

WKWebView中OC方法调使用JS方法


在WKWebView OC方法调使用JS方法方法比较简单.我们只要要用如下方法就可.

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

  • 1

看一下我写的例子.在index.js中定义一个方法.方法内容为弹出一个警告框.代码如下所示.

function alertAction(message) {

alert(message);

}

  • 1
  • 2
  • 3

而后在ViewController控制器中定义一个Button.定义它的点击方法.代码如下所示.

- (UIButton *)alertButton{

if (_alertButton == nil) {

_alertButton = [[UIButton alloc] initWithFrame:CGRectMake(KMainWidth*0.2, KMainHeight - 60, KMainWidth * 0.6, 40)];

_alertButton.backgroundColor = [UIColor colorWithRed:250/255.0 green:204/255.0 blue:96/255.0 alpha:1.0];

_alertButton.layer.cornerRadius = 6.0f;

_alertButton.layer.masksToBounds = YES;

_alertButton.titleLabel.font = [UIFont systemFontOfSize:16];

[_alertButton setTitle:@"弹出弹窗" forState:UIControlStateNormal];

[_alertButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

[_alertButton addTarget:self action:@selector(alertButtonAction) forControlEvents:UIControlEventTouchUpInside];

}

return _alertButton;

}

- (void)alertButtonAction{

[self.mainWebView evaluateJavaScript:@"alertAction('OC调使用JS警告窗方法')" completionHandler:^(id _Nullable item, NSError * _Nullable error) {

NSLog(@"alert");

}];

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

由于弹窗不可以直接显示.所以我们实现了对应的代理商方法.如下所示.

//接收到警告面板

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提醒" message:message preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {

completionHandler();//此处的completionHandler()就是调使用JS方法时,`evaluateJavaScript`方法中的completionHandler

}];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

这时候我们点击按钮就会调使用对应的JS方法了.相比于JavaScriptCore框架还是非常简单的.效果图如下所示.

浅谈WKWebView用、JS的交互

WKWebView中JS方法调使用OC方法


上一个板块我们看到了OC方法调使用JS方法.那么JS方法调使用OC方法呢?我们也只要要几步即可以完成调使用.

第一步.我们需要在WKWebView创立的过程中初始化增加ScriptMessageHandler.(命名自定例如:currentCookies.如下所示)

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

WKUserContentController *userController = [[WKUserContentController alloc] init];

configuration.userContentController = userController;

_mainWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, KMainWidth, KMainHeight) configuration:configuration];

[userController addScriptMessageHandler:self name:@"currentCookies"];

  • 1
  • 2
  • 3
  • 4
  • 5

而后实现代理商方法.监听JS的回调.为了查看效果,我们依然用弹窗的形式展现我们的回调信息.代码如下所示.

//JS调使用的OC回调方法

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

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

NSString *cookiesStr = message.body;

NSLog(@"当前的cookie为: %@", cookiesStr);

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提醒" message:@"JS调使用的OC回调方法" preferredStyle:UIAlertControllerStyleAlert];

UIAlertAction *action = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:nil];

[alert addAction:action];

[self presentViewController:alert animated:YES completion:nil];

}

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

而后在Html文件中增加点击方法.

点击调使用OC方法

  • 1
  • 2
  • 3

紧接着.在js文件中实现点击事件.这时候要注意的是ScriptMessageHandler的名称要与上面定义的一致.

function buttonDivAction() {

window.webkit.messageHandlers.currentCookies.postMessage({

"body": "buttonActionMessage"

});

}

  • 1
  • 2
  • 3
  • 4
  • 5
浅谈WKWebView用、JS的交互

而后我们点击网页中对应的div就会出现对应的弹窗.效果图如下所示.

浅谈WKWebView用、JS的交互

并且控制台打印信息如下所示.

浅谈WKWebView用、JS的交互

总结


相比于UIWebView,WKWebView的确更加的方便快捷.本篇博客就到这里了.假如有任何疑问,欢迎在评论区回复骚栋.感谢观看,最后还是附上本篇博客的Demo传送门.

  • 全部评论(0)
手机二维码手机访问领取大礼包
返回顶部