我们先写一个html页面
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现WkWebView的OC--js交互</title>
</head>
<body>
<h1>这是一个WKWebView样例</h1>
<select id="selectedID" onchange="getSelectedOption()">
<option value="systemVersion">iOS版本</option>
<option value="systemName">系统名字</option>
<option value="name">设备名字</option>
<option value="model">设备的model</option>
</select>
<h1>显示OC->js的新文本</h1>
<script type ="text/javascript">
//获取select元素、对象
var selectElement = document.getElementById("selectedID");
var h1Element = document.getElementsByTagName("h1")[0];
function getSelectedOption(){
var value = selectElement.value;
h1Element.innerHTML = value;
//postMessage小括号可以将js中的对象传给OC
window.webkit.messageHandlers.observer.postMessage(value);
}
//oc->js
function senValueToJS(valueStr){
//获取第二个h1元素对象
var h1SecondElement =document.getElementsByTagName("h1")[1];
//将valueStr设置成h1的文本
h1SecondElement.innerHTML ="这是从viewcontroller传过来的参数："+valueStr;
}
</script>
</body>
</html>
OC代码如下：
import "ViewController.h"
import <WebKit/WebKit.h>
@interface ViewController ()<WKScriptMessageHandler>
//创建webView
@property (nonatomic,strong)WKWebView *webView;
@end
@implementation ViewController
-
(void)viewDidLoad {
[super viewDidLoad];
//1.创建WKWebViewConfguration
WKWebViewConfiguration *config = [WKWebViewConfiguration new];
//设置相关属性
//设置默认最小字体大小
config.preferences.minimumFontSize =10;
//设置JS是否可用（YES）
config.preferences.javaScriptEnabled =YES;
//是否允许弹出框(NO)
config.preferences.javaScriptCanOpenWindowsAutomatically =YES;
//设置支持画中画
config.allowsPictureInPictureMediaPlayback =YES;//2.创建WKContentController对象
WKUserContentController *userContentController = [WKUserContentController new];
//和config绑定
config.userContentController =userContentController;//这是js 发送消息
// window.webkit.messageHandlers.observer.postMessage(value);
//注册/监听JS消息发送
[userContentController addScriptMessageHandler:self name:@"observer"];
//3.常见webView 并添加到view上
//webView和config绑定
self.webView = [[WKWebView alloc]initWithFrame:self.view.frame configuration:config];
[self.view addSubview:self.webView];
//4.加载本地html页面(html路径+request对象)
NSString *htmlPath = [[NSBundle mainBundle]pathForResource:@"wkwebview-js-oc.html" ofType:nil];
NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL fileURLWithPath:htmlPath]];
//是否允许左滑webview显示上一个webview
self.webView.allowsBackForwardNavigationGestures =YES;
[self.webView loadRequest:request];
}
-
(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
//判断是哪个消息(通过消息的名字)
if ([message.name isEqualToString:@"observer"]) {
//获取js传过来的value值
NSLog(@"接收到的消息的body内容：%@",message.body);
//调用UIDevice的方法
NSString *deviceInfoStr =[[UIDevice currentDevice] valueForKey:message.body];
NSLog(@"获取对应设备信息;%@",deviceInfoStr);
//设备信息
// [[UIDevice currentDevice].systemVersion doubleValue];
//实现oc->js（传devideInfoStr给JS;指定调用js的方法的名字）
NSString *jsFunctionStr = @"senValueToJS(\"%@\")";
NSString *jsStr = [NSString stringWithFormat:jsFunctionStr,deviceInfoStr];
//执行js 代码
[self.webView evaluateJavaScript:jsStr completionHandler:nil];
}
};
注释已经写的很详细了，大家一看就明白了！
网友评论