iOS开发中的WKWebView与JS的交互
2016-12-09 16:51
691 查看
之前已经写过一个篇OC与JS交互的博客了（博客地址：http://blog.csdn.net/u010105969/article/details/53189934），可当时用来展示网页的控件是UIWebView，而在iOS8之后苹果推出了WKWebView，此控件也能用来显示网页，可与JS的交互却与UIWebView有所不同。
JS代码：
（贴下判断iOS还是安卓的代码：
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方法
JS代码：
（贴下判断iOS还是安卓的代码：
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方法
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- iOS CommonCrypto 对称加密 AES ecb,cbc
- iOS沙盒文件存储
- IOS10 相册相机闪退bug解决办法
- iOS触摸事件
- CoreData 从入门到精通 二 数据的增删改查
- NSURLSession的使用
- iOS调用系统自带地图导航
- iOS KVO底层实现原理
- iOS - XIB之AutoLayout添加约束
- iOS常用开发技巧
- ios 项目中防止系统奔溃的方法
- iOS framework制作 带你走出那些坑
- 一次理解iOS证书配置流程，再也不用查教程
- iOS 相机权限以及相册权限访问
- iOS——info.plist访问权限的配置
- iOS下OC与JS的交互(WKWebview-MessageHandler实现)
- IOS异步获取数据并刷新界面dispatch_async的使用方法
- iOS 应用开发，用户密码存储技术－－KeyChain
- 极光单推设置别名
- iOS 镂空文字效果