iOS中JS与OC数据交互总结

2017-03-16 本文已影响1777人 Alphts

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文件中代码====
 <script>
    function changeName(name){
        var div = document.getElementById("mydiv");
        div.innerHTML = name;
    }
 </script>
 <body>
    <div>name:</div>
    <div onclick="test()" id="mydiv">zhangsan</div>
 </body>

但是这个方法是一个同步的方法,使用它执行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文件中代码====
 <script>
  function test() {
      var mydiv = document.getElementById("mydiv");
      window.location.href="bridge://" + mydiv.innerHTML;
  }
 </script>
 <body>
    <div>name:</div>
    <div onclick="test()" id="mydiv">zhangsan</div>
 </body>

但是html文件中的test()采用的window.location方式在多次请求时会存在被替换覆盖的问题,故采用下面这种方式:
<script>
function loadURL(url) {
var tempElement;
tempElement = document.createElement("tempElement");
tempElement.setAttribute("src", url);
tempElement.setAttribute("style", "display:none;");
tempElement.setAttribute("height", "0px");
tempElement.setAttribute("width", "0px");
tempElement.setAttribute("frameborder", "0");
document.body.appendChild(tempElement);
// 发起请求后这个 tempElement 就没用了，所以把它从 dom 上移除掉
tempElement.parentNode.removeChild(tempElement);
tempElement = null;
}
function test() {
var mydiv = document.getElementById("mydiv");
loadURL("bridge://" + mydiv.innerHTML);
}
</script>

使用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文件中代码====
 <script>
    function test() {
      // myName的值是OC中代码赋值的
      alert(myName);
      // test3的具体实现在OC代码中
      test3("one","two","three");
    }
 </script>
 <body>
    <div>name:</div>
    <div onclick="test()" id="mydiv">zhangsan</div>
 </body>

iOS中JS与OC数据交互总结

OC调用JS的方法

JS调用OC的方法

猜你喜欢

热点阅读