iOS之WKWebView与JS如何交互
这篇文章主要为大家展示了“iOS之WKWebView与JS如何交互”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“iOS之WKWebView与JS如何交互”这篇文章吧。
创新互联致力于互联网网站建设与网站营销，提供网站设计、做网站、网站开发、seo优化、网站排名、互联网营销、微信平台小程序开发、公众号商城、等建站开发，创新互联网站建设策划专家，为不同类型的客户提供良好的互联网应用定制解决方案，帮助客户在新的全球化互联网环境中保持优势。
首先使用WKWebView.你需要导入WebKit #import
然后初始化一个WKWebView,设置代理,并且执行代理的方法.在网页加载成功的时候,我们会调用一些JS代码对网页进行设置.
WKWebView的代理一共有三个:WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler
1.WKWebView调用JS方法
/**
iOS调用js里的navButtonAction方法并传入两个参数
@param 'Xuanhe' 传入的参数
@param 25 传入的参数
@return completionHandler 回调
*/
[self.webView evaluateJavaScript:@"navButtonAction('Xuanhe',18)" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
NSLog(@"response:%@,error:%@",response,error);
}];网页加载完成
//网页加载完成
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
//设置JS
NSString *js = @"document.getElementsByTagName('h2')[0].innerText";
//执行JS
[webView evaluateJavaScript:js completionHandler:^(id _Nullable response, NSError * _Nullable error) {
NSLog(@"value: %@ error: %@", response, error);
}];
}通过以上操作就成功获取到h2标签的文本内容了.如果报错,可以通过error进行相应的错误处理.
2.加载JS代码
创建WKWebView,并在创建时向JS写入内容.
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, kNavBarH, kScreenW, kScreenH-kNavBarH) configuration:config];
webView.navigationDelegate = self;
webView.UIDelegate = self;
//获取HTML上下文的第一个h3标签,并写入内容
NSString *js = @"document.getElementsByTagName('h3')[0].innerText = '这是一个iOS写入的方法'";
WKUserScript*script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
[config.userContentController addUserScript:script];
[self.view addSubview:webView];调用JS方法:
[[webView configuration].userContentController addScriptMessageHandler:self name:@"show"];
遵循代理WKScriptMessageHandler后,调用JS的方法show;
实现WKScriptMessageHandler代理方法,调用JS方法后的回调,可以获取到方法名,以及传递的数据:
//js传递过来的数据
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
NSLog(@"%@",message.name);//方法名
NSLog(@"%@",message.body);//传递的数据
}获取JS弹窗信息
遵循WKUIDelegate代理,实现相关代理方法:
// alert
//此方法作为js的alert方法接口的实现，默认弹出窗口应该只有提示信息及一个确认按钮，当然可以添加更多按钮以及其他内容，但是并不会起到什么作用
//点击确认按钮的相应事件需要执行completionHandler，这样js才能继续执行
////参数 message为 js 方法 alert() 中的-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
// confirm
//作为js中confirm接口的实现，需要有提示信息以及两个相应事件， 确认及取消，并且在completionHandler中回传相应结果，确认返回YES， 取消返回NO
//参数 message为 js 方法 confirm() 中的-(void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:([UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
completionHandler(NO);
}])];
[alertController addAction:([UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(YES);
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
// prompt
//作为js中prompt接口的实现，默认需要有一个输入框一个按钮，点击确认按钮回传输入值
//当然可以添加多个按钮以及多个输入框，不过completionHandler只有一个参数，如果有多个输入框，需要将多个输入框中的值通过某种方式拼接成一个字符串回传，js接收到之后再做处理
//参数 prompt 为 prompt(,);中的//参数defaultText 为 prompt(,);中的-(void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:prompt message:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
textField.text = defaultText;
}];
[alertController addAction:([UIAlertAction actionWithTitle:@"完成" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(alertController.textFields[0].text?:@"");
}])];
[self presentViewController:alertController animated:YES completion:nil];
}demo地址
还有一些其他的跳转代理,我将新开文章来解释.
其他拓展: Webview点击图片查看大图
大家都知道，WKWebview里面并没有查看网页大图的属性或者方法的，所以只能通过js与之交互来实现这一功能.基本原理是:通过JS获取页面所有的图片,把这些图片村到数组中,给图片添加点击事件,通过下标显示大图即可.
首先创建WKWebView:
NSString *url = @"http://tapi.mukr.com/mapi/wphtml/index.php?ctl=app&act=news_detail&id=VGpTSDhkemFVb3Y4Y3JXTFdRR2J4UT09"; WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, kNavBarH, kScreenW, kScreenH-kNavBarH)]; webView.navigationDelegate = self; [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:url]]]; [self.view addSubview:webView]; self.webView = webView;
加载完成后,通过注入JS方法,获取所有图片数据
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
[webView xh_getImageUrlWithWebView:webView];
}注入的JS代码,是自己写在移动端的,可以根据需要自己修改,当前前提是你要回前端的代码.
- (NSArray *)xh_getImageUrlWithWebView:(WKWebView *)webView{
//js方法遍历图片添加点击事件返回图片个数
static NSString * const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
var imgUrlStr='';\
for(var i=0;i在点击图片的时候,把返回的字符串分隔为数组,数组中每个数据都是一张图片地址.
再通过循环方法找到点击的是第几张图片.
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
[self showBigImage:navigationAction.request];
decisionHandler(WKNavigationActionPolicyAllow);
}
- (void)showBigImage:(NSURLRequest *)request {
NSString *str = request.URL.absoluteString;
if ([str hasPrefix:@"myweb:imageClick:"]) {
NSString *imageUrl = [str substringFromIndex:@"myweb:imageClick:".length];
NSArray *imgUrlArr = [self.webView getImgUrlArray];
NSInteger index = 0;
for (NSInteger i = 0; i < [imgUrlArr count]; i++) {
if([imageUrl isEqualToString:imgUrlArr[i]]){
index = i;
break;
}
}
NSLog(@"im");
}
}拿到点击的图片,也就是当前图片,也拿到所有的图片数组,就可以进行图片预览了.
UIWebView的点击图片方法和WKWebView方法类似,只不过是,注入的JS的代码,略微不同,返回的数组中最后一个数据就是当前图片.
以上是“iOS之WKWebView与JS如何交互”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网站栏目：iOS之WKWebView与JS如何交互
文章转载：http://scjbc.cn/article/ppojdj.html
