iOS中JS与OC数据交互总结

iOS开发过程中会经常和UIWebView打交道,这其中不可避免的涉及到JS和OC的数据交互,今天在此总结下这其中的几种方法.

OC调用JS的方法

• UIWebView的 stringByEvaluatingJavaScriptFromString方法

   ====OC中的代码====
  - (IBAction)didClickButton:(id)sender {
      NSString *name = @"lisi";
      NSString *jsStr = [NSString stringWithFormat:@"changeName(\"%@\")",name];
      [self.webview stringByEvaluatingJavaScriptFromString:jsStr];
  }
  
   ====Html文件中代码====
   
   
      
  name:
      
  zhangsan
   
  

但是这个方法是一个同步的方法,使用它执行JS方法时,如果JS 方法比较耗的时候,会造成界面卡顿.此时,将耗时较长的js方法放到setTimeout中即可.当然,如果尝试在子线程中调用stringByEvaluatingJavaScriptFromString显然是不正确的.报错信息如下:

Tried to obtain the web lock from a thread other than the main thread or the web thread. This may be a result of calling to UIKit from a secondary thread. Crashing now...

• 运用JavaScriptCore来实现
  在iOS 7之后，apple添加了一个新的库JavaScriptCore,他是webkit的一个重要组成部分,主要是对JS进行解析和提供执行环境,极大的方便了我们对js的操作.
  在这里,我建立了一个UIWebView的分类,主要作用是获取webView的上下文,便于对js的操作:
  /**
  * 黑魔法桥接js
  */
  @interface UIWebView (JSContext)
  - (nullable JSContext *)context;
  @end

    #import "UIWebView+JSContext.h"
    @implementation UIWebView (JSContext)
    - (JSContext *)context {
        return  [self valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    }
    @end
  

  点击iOS原生按钮执行js代码:
  - (IBAction)didClickButton:(id)sender {
  NSString *name = @"lisi";
  NSString *jsStr = [NSString stringWithFormat:@"changeName("%@")",name];
  JSContext *context = self.webview.context;
  [context evaluateScript:jsStr];
  }

JS调用OC的方法

• JS发送一个假的url请求,然后在webView的代理方法中拦截该请求,并做相应的处理

   ====OC中的代码====       
  - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
      //调用OC原生方法
      if ([request.URL.scheme isEqualToString:@"bridge"]) {
          //调用OC原生方法 如打开摄像头之类的方法
          // .......
          return NO;
      }
      return YES;
  }
  
   ====Html文件中代码====
   
   
      
  name:
      
  zhangsan
   
  

但是html文件中的test()采用的window.location方式在多次请求时会存在被替换覆盖的问题,故采用下面这种方式:

• 使用JavaScriptCore
  - (void)webViewDidFinishLoad:(UIWebView *)webView{

      JSContext *context = webView.context;
      // 给JS变量赋值
      context[@"myName"] = @"sunsb";
      // 给JS方法赋值
      context[@"test3"] = ^(){
         // 可以执行具体的OC代码......
         // ##注意:这里是子线程
         NSLog(@"点击js执行了OC的方法了\n线程:%@\n",[NSThread currentThread]);
         NSArray *args = [JSContext currentArguments];
         for (JSValue *value in args) {
             NSLog(@"%@",value.toString);
         }
      };
  }
  
   ====Html文件中代码====
   
   
      
  name:
      
  zhangsan