ios WKWebView 与h5 js数据交互

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

推荐一个linux命令行网站:https://rootopen.com