WKWebView 原生与JS交互实现
1、js给原生发送消息
方法一，js通过触发URL的方式，定义一套协议头，把参数拼接到URL后面，然后WKWebView通过拦截URL，做到传值效果，但是不能立马拿到返回值，因为js是单线程的，而在原生里面则是多线程，如果要想拿到返回值，需要等到原声回调js函数才能拿到
上代码：
js代码，简单点的吧
<a href="webview://login?username=xiaoming&password=123456">点我去原生登陆</a>
oc代码，
WKWebViewNavigationDelegate代理方法
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
NSURL url = navigation.request.url;
if ([[url scheme] isEqualToString: @"webview"]) {
//取出拼接在URL后面的参数
NSString *string = url.absoluteString;
NSArray *array = [string compoentsSeparatedByString:@"?"];
if(array.count>0){
if([array[0] isEqualToString:@"login"]) {
//获取登陆 参数
NSMutableDictionary * parameters = [NSMutableDictionary Dictionary];
for(NSString *str in [array.lastObject compoentsSeparatedByString:@"&"]) {
NSArray * parameter = [str compoentsSeparatedByString:@"="];
parameters[parameter.firstObject] = parameter.lastObject;
}
}
decisionHandler(WKNavigationActionPolicyCancel);
return;
}
decisionHandler(WKNavigationActionPolicyAllow);
}
方法二、通过js通过调用这个函数来给wkwebview发送消息 window.webkit.messageHandlers.<name>.postMessage(<messageBody>)，在WKUserContentController.h 文件中有介绍，其中<name>为协议的名称，<messageBody>为发送消息要传的参数
例如,：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oc与JS交互传值Demo</title>
<script>
function sendMessage() {
alert('lll');
var name = 'xiaoming';
var password = '123456';
window.webkit.login.postMessage({'name':name,'password':password});
}
window.onload = function () {
let btn = document.getElementById('btn');
btn.onclick = sendMessage;
}
</script>
</head>
<body>
<input type="button" value="发消息去" id="btn">
</body>
</html>
这是一个简单的html
oc中接收js消息代码
//初始化
WKWebViewConfigration *webViewConfigration = [[WKWebViewConfigration alloc]init];
webViewConfigration.userContentController = [[WKUserContentController alloc]init];
webViewConfigration.userContentController
WKWebView *webView = [ [WKWebView alloc]initWithFrame:[UIScreen mainScreen].bounds configration:webViewConfigration];
//添加一个协议
[webViewConfigration.userContentController addScriptMessageHandler:self name:@"login"];
self必须遵守WKScriptMessageHandler协议并实现方法
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
//messag.name为协议的名字"login"
//message.body为js传过来的值
}
2、oc给js发送消息
采用苹果提供的接口，可以动态注入js代码，也能调用js方法
oc代码如下：
[_webView evaluateJavaScript:@"outLogin(true)" completionHandler:^(id _Nullable meassge, NSError * _Nullable error) {
//消息执行完成的回调
}];
js代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oc与JS交互传值Demo</title>
<script>
function outLogin(meassge) {
//退出登录，清理缓存
return true;
}
</script>
</head>
<body>
</body>
</html>
先到此下一篇讲WKWebViewJavaScriptBridge解析，也是基于原生代码的封装
网友评论