主要记录下来H5与WKWebView的原生交互，以便以后查询使用。
1.URL拦截
创建WKWebView，加载网页
这里只是简单的加载网页，没有做多余的操作，也没有显示进度条
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];
WKWebView *webView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:configuration];
[self.view addSubview:webView];
webView.UIDelegate = self;
webView.navigationDelegate = self;
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://127.0.0.1:5500/index.html"]]];
self.webView = webView;
遵循协议WKNavigationDelegate，实现👇方法，在该方法中达到拦截URL的目的。
1.js的响应点击事件，相当于模拟一次网络请求，webView就可以捕获到js的请求事件，
这里的html代码主要参考，这篇文章中很详细的介绍了有关js和oc相互调用的方法，值得一看https://blog.csdn.net/u011619283/article/details/52135982
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<script language="javascript">
function loadURL(url) {
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", url);
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("height", "0px");
iFrame.setAttribute("width", "0px");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);
// 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}
function getNameClick() {
//相当于模拟一次请求
loadURL("xylnamehttp:getLocation");
}
function setName(name) {
alert(name);
}
</script>
</head>
<body>
<input type="button" value="获取名称" onclick="getNameClick()" />
</body>
</html>
2.先约定好以xylnamehttp为开头的URL，当拦截到的URL是以xylnamehttp开头，通过evaluateJavaScript方法调用js
//接受相应之前，决定是否跳转
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
NSURL *URL = navigationAction.request.URL;
NSString *scheme = [URL scheme];
if ([scheme isEqualToString:@"xylnamehttp"]) {
// 将结果返回给js
[self.webView evaluateJavaScript: [NSString stringWithFormat:@"setName('小一')"] completionHandler:^(id _Nullable response, NSError * _Nullable error) {
if (!error) {
NSLog(@"response == %@",response);
}
}];
//不允许跳转
decisionHandler(WKNavigationActionPolicyCancel);
return;
}
//允许跳转
decisionHandler(WKNavigationActionPolicyAllow);
}
3.js中接收到响应setName(name)，name由webView传过来，弹出提示框
function setName(name) {
alert(name);
}
4.在webView中显示弹窗
遵循协议WKUIDelegate，实现👇方法，弹出提示框
#pragma mark - WKUIDelegate
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"姓名" message:message preferredStyle:UIAlertControllerStyleAlert];
[alert addAction:[UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}]];
[self presentViewController:alert animated:YES completion:nil];
}
2.WKScriptMessageHandler
我们前端说上面的URL拦截方法不好理解，因为需要模拟一次网络请求，让我再找找更便捷的方法，代码更加简洁优雅点的，WKScriptMessageHandler来了
//配置
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];
//偏好
configuration.preferences = [[WKPreferences alloc]init];
configuration.preferences.minimumFontSize = 10;
configuration.preferences.javaScriptEnabled = YES;
configuration.preferences.javaScriptCanOpenWindowsAutomatically = YES;
//创建
WKWebView *webView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:configuration];
[self.view addSubview:webView];
webView.UIDelegate = self;
//加载html，也可以加载本地Html
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://127.0.0.1:5500/messageHandler.html"]]];
//将这个看做js调用oc的桥梁，name是js调用的方法名，self表示代理对象控制器
[webView.configuration.userContentController addScriptMessageHandler:self name:@"Name"];
self.webView = webView;
1.js中相应button的点击事件，在js中执行window.webkit.messageHandlers.Name.postMessage("123")
这个Name就是上面的方法名，123表示传递的参数
function nameClick() {
window.webkit.messageHandlers.Name.postMessage("123");
}
function setName(name) {
alert(name);
}
2.遵循WKScriptMessageHandler协议，js中执行window.webkit.messageHandlers.Name.postMessage("123")时，就是实现协议中的方法👇
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
if ([message.name isEqualToString:@"Name"]) {
//message.body是js中传递过来的参数，这里就完成了js调用oc
NSLog(@"message.body == %@",message.body);
[self getName];
}
}
-(void)getName
{
//将姓名回传给js
[self.webView evaluateJavaScript:@"setName('小二')" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
if (!error) {
NSLog(@"response == %@",response);
}
}];
}
第三步和第四步和拦截URL中的方式是一样的。
5.需要注意的是使用addScriptMessageHandler容易引起内存泄露，在离开页面的时候需要remove
-(void)viewWillDisappear:(BOOL)animated
{
[super viewWillDisappear:animated];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Name"];
}
网友评论