447,oc与js交互?(面试点:1,拦截url 2,WKScr

2021-02-01  本文已影响0人  枫叶1234

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解析,也是基于原生代码的封装

上一篇下一篇

猜你喜欢

热点阅读