20170930150673790659cefef200538.gif
note:图中上部分为web页面,下半部分是ios原生控件, 演示的是web页面与ios原生控件之间的数据交互
1.导入webkit
#import <WebKit/WebKit.h>
//添加代理方法后面要用
@interface ViewController ()<WKNavigationDelegate,WKUIDelegate,UIScrollViewDelegate,WKScriptMessageHandler>
这里设置UIScrollViewDelegate代理方法是为了实现不让WKWebView缩放.
//禁止WKWebView缩放
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return nil;
}
2.初始化WKWebView
NSString *file = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *baseUrl = [[NSBundle mainBundle] bundleURL];
// 创建配置
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
// 创建UserContentController（提供JavaScript向webView发送消息的方法）
WKUserContentController* userContent = [[WKUserContentController alloc] init];
// 添加消息处理，注意：self指代的对象需要遵守WKScriptMessageHandler协议，结束时需要移除
[userContent addScriptMessageHandler:self name:@"NativeMethod"];
// 将UserConttentController设置到配置文件
config.userContentController = userContent;
//初始化webView
self.h5WebView = [[WKWebView alloc]initWithFrame:CGRectZero configuration:config];
[self.view addSubview:_h5WebView];
[_h5WebView loadHTMLString:[NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil] baseURL:baseUrl];
3.实现代理方法
#pragma make 页面开始加载
-(void)webView:(WKWebView *)webView didStartProvisionalNavigation: (WKNavigation *)navigation
{
NSLog(@"页面开始加载");
}
#pragma make 内容开始返回时调用
-(void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation
{
NSLog(@"内容开始返回时调用");
}
#pragma make 页面加载完成之后
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
NSLog(@"页面加载完成之后");
}
#pragma make 页面加载失败时回调
-(void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error
{
NSLog(@"页面加载失败");
}
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
// 接收到h5页面返回的数据
if ([@"NativeMethod" isEqualToString:message.name]) {
//处理相应逻辑
NSString *msgstr = [NSString stringWithFormat:@"%@\n",[_contentView.text stringByAppendingString:message.body]];
_contentView.text = msgstr;
}
}
4.ios向html注入js
//设置JS
NSString *inputValueJS = [NSString stringWithFormat:@"var text=document.getElementById('demo').innerHTML+'%@'+'<br/>';document.getElementById('demo').innerHTML=text;",acceptstr];
//执行JS
[_h5WebView evaluateJavaScript:inputValueJS completionHandler:^(id _Nullable response, NSError * _Nullable error) {
NSLog(@"value: %@ error: %@", response, error);
}];
5.html页面向ios发送js数据
window.webkit.messageHandlers.NativeMethod.postMessage(text);
#jQuery部分代码
$(document).ready(function(){
$("#send").click(function(){
var ptext = $("p").html();
var text ="已发送:"+$(":text").val();
ptext = ptext+text+"<br/>";
$("p").html(ptext);
window.webkit.messageHandlers.NativeMethod.postMessage(text);
});
});
#ios端代理方法中接收内容
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
// 接收到h5页面返回的数据
if ([@"NativeMethod" isEqualToString:message.name]) {
//处理相应逻辑
NSString *msgstr = [NSString stringWithFormat:@"%@\n",[_contentView.text stringByAppendingString:message.body]];
_contentView.text = msgstr;
}
}
6.用完销毁 不销毁有内存泄露情况
-(void)dealloc
{
[_h5WebView.configuration.userContentController removeScriptMessageHandlerForName:@"NativeMethod"];
}
7.查看完整demo
https://github.com/guiguihao/WKWebViewWithJs
