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文件中代码====
     <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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容