专栏首页DannyHoo的专栏iOS开发中的WKWebView与JS的交互

iOS开发中的WKWebView与JS的交互

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/53541088

之前已经写过一个篇OC与JS交互的博客了(博客地址:http://blog.csdn.net/u010105969/article/details/53189934),可当时用来展示网页的控件是UIWebView,而在iOS8之后苹果推出了WKWebView,此控件也能用来显示网页,可与JS的交互却与UIWebView有所不同。

JS代码:

(贴下判断iOS还是安卓的代码:

varu = navigator.userAgent;

varisAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

varisiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

alert('是否是Android:'+isAndroid);

alert('是否是iOS:'+isiOS);

if(isAcdroid){

 }else if(isiOS){

 }

<!DOCTYPE html>

<html>

<head>

<title>iOS and Js</title>

<style type="text/css">

            * {

font-size:40px;

            }

</style>

</head>

<body>

<div style="margin-top: 100px">

<h1>Test how to use objective-c call js</h1><br/>

<div><inputtype="button"value="call js alert"onclick="callJsAlert()"></div>

<div><inputtype="button"value="111111"onclick="callAbc1()"></div>

<div><inputtype="button"value="222222"onclick="callAbc2()"></div>

<br/>

<div><inputtype="button"value="Call js confirm"onclick="callJsConfirm()"></div><br/>

</div>

<br/>

<div>

<div><inputtype="button"value="Call Js prompt "onclick="callJsInput()"></div><br/>

<div>Click me here:<ahref="http://www.baidu.com">Jump to Baidu</a></div>

</div>

<br/>

<div id="SwiftDiv">

<span id="jsParamFuncSpan"style="color: red; font-size: 50px;"></span>

</div>

<script type="text/javascript">

function callJsAlert() {

                alert('Objective-C call js to show alert');

            }

function callAbc1() {

            alert('liangsen...');

// window.webkit.messageHandlers.AppModel.postMessage({body: 'call js alert in js'});

        }

function callAbc2() {

            nslog('22222...');

// window.webkit.messageHandlers.AppModel.postMessage({body: 'call js alert in js'});

        }

function callJsConfirm() {

if (confirm('confirm','Objective-C call js to show confirm')) {

                document.getElementById('jsParamFuncSpan').innerHTML

                = 'true';

            } else {

                document.getElementById('jsParamFuncSpan').innerHTML

                = 'false';

            }

// AppModel是我们所注入的对象

// window.webkit.messageHandlers.AppModel.postMessage({body: 'call js confirm in js'});

        }

function callJsInput() {

var response = prompt('Hello','Please input your name:');

            document.getElementById('jsParamFuncSpan').innerHTML = response;

// AppModel是我们所注入的对象

// window.webkit.messageHandlers.AppModel.postMessage({body: response});

        }

</script>

</body>

</html>

效果图:

在点击前三个按钮的时候会调用方法:

// 警告框

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

    completionHandler();

NSLog(@"3-----%@",message);

}

输出的message就是JS传递给我们的数据。

如果点击第四个conform按钮会调用方法:

// 确认框

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

    completionHandler(YES);

NSLog(@"-----%@",message);

}

输出的message就是JS传递给我们的数据。

如果点击最后一个input按钮会调用方法:

// 输入框

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

    completionHandler(@"http");

NSLog(@"-----%@", prompt);

}

输出的prompt是JS传递给我们的数据。

注意:在利用UIWebView展示网页的时候我们如果要想与JS进行交互那么我们就得获取JS代码中的方法名,而我们在使用WKWebView的时候就不用了。JS代码中利用

 alert('liangsen...');

来给我们传递数据,我们用runJavaScriptAlertPanelWithMessage这个方法来接收JS传递给我们的数据。

传数据:

网页给客户端传递的数据有时并不只是一个字符串这个简单,还可能是JSON数据类型的数据,这时我们需要其他的传递数据的方式。首先需要增加html中的代码,如在“111111”按钮的点击事件增加代码:

 window.webkit.messageHandlers.AppModel.postMessage({body: 'call js alert in js'});

AppModel是我们注入的对象,“()”中的内容是我们传递给客户端的数据。

客户端中需增加的代码:

// 注入JS对象名称AppModel,当JS通过AppModel来调用时,

// 我们可以在WKScriptMessageHandler代理中接收到

 [config.userContentControlleraddScriptMessageHandler:selfname:@"AppModel"];

注意JS对象名称的一致性(这里的JS对象名称是“AppModel”)。

实现代理中的方法:

#pragma mark - WKScriptMessageHandler

- (void)userContentController:(WKUserContentController *)userContentController

      didReceiveScriptMessage:(WKScriptMessage *)message {

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

NSDictionary * dic = message.body;

NSString * urlStr = dic[@"body"];

NSLog(@"urlStr:%@", urlStr);

if ([message.nameisEqualToString:@"AppModel"]) {   // 打开外部链接

NSLog(@"找到了注入的JS对象...");

    }

}

OC调用JS代码:

[self.webView evaluateJavaScript:@"jsFunction()" completionHandler:^(id _Nullable result, NSError * _Nullable error) {

NSLog(@"==%@----%@",result, error);

            }];

jsFunction()是 js方法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • http://blog.csdn.net/u010105969/article/details/53541088

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    用户1451823
  • 利用UIPanGestureRecognizer手势全屏侧滑返回

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

    用户1451823
  • OC中的类和对象

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/de...

    用户1451823
  • golang goquery selector(选择器) 示例大全

    最近研究Go爬虫相关的知识,使用到goquery这个库比较多,尤其是对爬取到的HTML进行选择和查找匹配的内容时,goquery的选择器使用尤其多,而且还有很多...

    飞雪无情
  • JQuery选择器(中)

    HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

    HTML5学堂
  • Vue中$refs的理解

    $refs是一个对象,持有注册过ref attribute的所有DOM元素和组件实例。

    WindrunnerMax
  • 这种div高度自适应确定你知道吗?

    _simple
  • 谈谈出入React框架踩过的坑

    1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop value ...

    外婆的彭湖湾
  • Angular Pipe 快速入门

    Angular 中 Pipe(管道) 与 Angular 1.x 中的 filter(过滤器)的作用的是一样的。它们都是用来对输入的数据进行处理,如大小写转换、...

    阿宝哥
  • pygame-游戏开发学习笔记(九)–pygame.向量实现

    本文略难,系转载,原文出自,http://python.jobbole.com/83557/

    十四君

扫码关注云+社区

领取腾讯云代金券