聊一聊 WebView 与 JS 交互方案 - 适用 Android & iOS

webview 与 JS 交互分为两种:

  • Android & iOS 调用 JS 的方法
  • JS 调用 Android & iOS 的方法

Android & iOS 调用 JS 的方法,伪代码如下:

  • Android

    webView.loadUrl("javascript:show('xxx');");
    
  • iOS

    NSString *result = [self.webView stringByEvaluatingJavaScriptFromString:@"showReturn('xxx');"];
    

webview 调用 JS 的方法比较简单,show('xxx') 方法是 JS 中定义的一个方法:

<script language=javascript>
   function show(str) {
      alert(str);
   }
    
   function showReturn(str) {
      return "result";
   }
</script>

这种方式,缺陷很明显:

  1. Android 没法拿到返回值;但是,iOS是可以拿到返回值的,这是最重要的区别!!!另外,我们也无法传递一个回调接口Callback用于回调,也就是说此方法调用成功与否,是无法知道的。

  2. show方法必须是 JS 中存在的,即使不存在你调用了也不会报错;另外,随着业务的增长,我们不得不增加许许多多类似show的方法,来处理其他业务。

JS 调用 Android & iOS 的方法,伪代码如下:

  • Android

    private class JsToNative {
      // 没有返回结果        
      @JavascriptInterface 
      public void jsMethod(String paramFromJS) { 
      
      } 
    
      // 有返回结果
      @JavascriptInterface 
      public String jsMethodReturn(String paramFromJS) { 
         return "your result";
      } 
    }
    
    // JsToNative就是一个别名,你可以随意
    webView.addJavascriptInterface(new JsToNative(), "JsToNative");
    

    JS 调用 Android

    // 没有返回结果
    var paramFromJS = "xxx";
    window.JsToNative.jsMethod(paramFromJS);
    
    // 有返回结果
    var returnResult = window.JsToNative.jsMethodReturn(paramFromJS);
    
  • iOS
    两种方式:

    • JS 里面直接调用方法
    • JS 里面通过对象调用方法

方式一:JS 里面直接调用方法

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    context[@"jsMethod"] = ^() { 
        NSArray *args = [JSContext currentArguments];  
        for (id obj in args) {  
            NSLog(@"%@",obj);  
        } 
    }

    context[@"jsMethodReturn"] = ^() { 
        return "your result";
    }
}

JS 调用 iOS

// 没有返回结果
var paramFromJS = "xxx";
jsMethod(paramFromJS);

// 有返回结果
var returnResult = jsMethodReturn(paramFromJS);

方式二:JS 里面通过对象调用方法

这种方式需要使用到 JSExport 协议,类似Android的 @JavascriptInterface 注解。

由于篇幅原因,这里不做详细讲解,感兴趣的同学可以参考:这里

小结:

  1. JS 都可以从 Android 和 iOS 方法拿到返回值,不存在Android 调用 JS 无法拿到返回值的情况。
  2. 弊端和前面类似,JS 事先需要知道 Android 和 iOS 的方法名(参数等);另外,随着业务的增长,我们不得不增加更多的方法,来处理其他业务。

思考:

  1. 如何避免 JS、Android、iOS 相互调用时,需要事先“约定”方法名称和参数?
  2. 原生调用 JS 方法,能否类似原生开发一样,使用 Callback(block) 做为回调方式?
  3. JS 调用原生能否使用 function 获得返回值?

iOS/OSX - WebViewJavascriptBridge

这是marcuswestin公司开源的一个用于 iOS/OSX 平台 webview 与 JS 通信的方案,它在 webview 和 JS 之间“架了”一座桥梁,提供了非常便捷的通信方式,引用官方的介绍:

An iOS/OSX bridge for sending messages between Obj-C and JavaScript in UIWebViews/WebViews

此项目的star数量达到7600+,可见受欢迎程度非常高,而且据说还有很多大公司的项目在使用,包括:

这个开源项目的用法也非常简单,简单的示例如下:

  1. 注册handler

Obj-C中注册handler,给JS调用:

   self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
   [self.bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
      // 收到JS的调用
      NSLog(@"testObjcCallback called: %@", data);
      // 回调结果给JS
      responseCallback(@"Response from testObjcCallback");
   }];

JS中注册handler,给Obj-C调用(JS代码):

   bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
      // 收到Obj-C的调用
      log('ObjC called testJavascriptHandler with', data)
      var responseData = { 'Javascript Says':'Right back atcha!' }
      log('JS responding with', responseData)
      // 回调结果给Obj-C
      responseCallback(responseData)
   })
  1. 根据第一步注册的handler,发送消息
    第一步注册的handler有两个:testObjcCallbacktestJavascriptHandler

Obj-C调用JS:

   [self.bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
      NSLog(@"testJavascriptHandler responded: %@", response);
   }];

JS调用Obj-C:

   bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
      log('JS got response', response)
   })

使用起来很简单,主要就是使用registerHandler来注册callback(block),然后使用callHandler来调用注册的callback(block)

Obj-C与JS互调,传递数据的格式为String,建议使用JSON格式,这样更易于数据的交互。

关于WebViewJavascriptBridge更多详细的配置和用法,请看这里

iOS/OSX平台有这样的Obj-C与JS交互方案,如果Android平台也有类似的方案,岂不是更加完美?

Android - JsBridge

感谢开源的力量,已经有人给出了类似的解决方案:

hi大头鬼hi(lzyzsd),微博地址:http://weibo.com/brucefromsdu
JsBridge 开源地址:https://github.com/lzyzsd/JsBridge

据作者描述,是从JsBridge和微信的jsBridge file改造而来,加了一些新特性和修复了一些bug。

阅读完整个开源项目之后,我惊讶的发现,关于 jsBridge 的设计居然和上文介绍的 WebViewJavascriptBridge 几乎一模一样。

唯一,也是最明显的一个区别,就是为了解决我们本文开始遇到的问题:

Android & iOS 调用 JS 的方法 - Android 没法拿到返回值;但是,iOS是可以拿到返回值的。

为了解决这个问题,作者使用了 webview url 自定义的 schema ,然后截取数据并拦截请求。

jsBridge 差异部分,关键代码如下:

  • iOS - jsBridge

    function _fetchQueue() {
       var messageQueueString = JSON.stringify(sendMessageQueue);
       sendMessageQueue = [];
       return messageQueueString;
    }
    
  • Android - jsBridge

    function _fetchQueue() {      
       var messageQueueString = JSON.stringify(sendMessageQueue);        
       sendMessageQueue = [];    
       // return messageQueueString;        
       // Android无法直接返回数据, 这是与iOS最大的区别; 所以, 需要使用自定义url形式返回数据。     
       messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);   
    }
    

另外,jsBridge 的“加载时机”也有所不同,差异代码如下:

  • iOS - WebViewJavascriptBridge

    function setupWebViewJavascriptBridge(callback) {
      if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
      if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
      window.WVJBCallbacks = [callback];
      var WVJBIframe = document.createElement('iframe');
      WVJBIframe.style.display = 'none';
      WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
      document.documentElement.appendChild(WVJBIframe);
      setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
    

iOS中,需要在你的web页面的JS脚本中执行这么一段方法,然后在UIWebView的代理方法shouldStartLoadWithRequest拦截wvjbscheme://__BRIDGE_LOADED__类型的URL,然后加载 jsBridge:

iOS - jsBridge.png

  • Android - JsBridge
    而Android中,不需要在web页面引入那段JS方法;只需要在WebViewClient的onPageFinished方法中加载 jsBridge:
Android - jsBridge.png

很明显,Android 和 iOS 不同的平台需要在 web 页面引入的内容有所不一样;这样,会导致 web 页面开发人员需要根据不同的平台分别处理。

既然,我们的初衷是想找到 Android 和 iOS 平台同时都适用的方案,就必须解决这个问题。

为此,我改造了 大头鬼 的JsBridge库,Android 使用了和 iOS - WebViewJavascriptBridge 的一致的 jsBridge 文件,唯一修改的方法是_fetchQueue(),正如前面提到的,为了解决:

Android & iOS 调用 JS 的方法 - Android 没法拿到返回值;但是,iOS是可以拿到返回值的。

同时,需要和 iOS 一样,在 web 页面执行一段 JS 方法。其他使用方式基本保持不变,这里感谢 大头鬼 的代码。

本来是从fork过来的代码,但是改动比较多,所以就不提交给原作者了。

基本使用步骤和iOS的保持高度一致,简单示例如下:

  1. 注册handler

Android中注册handler,给JS调用:

   webView = (BridgeWebView) findViewById(R.id.webView);
   webView.registerHandler("testObjcCallback", new BridgeHandler() {
      @Override
      public void handler(String data, CallBackFunction function) {
         Log.i(TAG, "testObjcCallback called: " + data);
         function.onCallBack("Response from testObjcCallback");
      }
   });

JS中注册handler,给Android调用(JS代码):

   bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
      log('ObjC called testJavascriptHandler with', data)
    var responseData = { 'Javascript Says':'Right back atcha!' }
    log('JS responding with', responseData)  
      responseCallback(responseData)
   })
  1. 根据第一步注册的handler,发送消息
    第一步注册的handler有两个:testObjcCallbacktestJavascriptHandler

Android调用JS:

   webView.callHandler("testJavascriptHandler", "{\"foo\":\"before ready\"}", new CallBackFunction() {
      @Override
      public void onCallBack(String data) {

      }
   });

JS调用Android:

   bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
      log('JS got response', response)
})

关于JsBridge更多详细的配置和用法,请看这里

有了这样的两个库,可以很方便的让我们在Android和iOS平台与JS交互时,使用一致的通信方案,较少了前端同学很多的适配工作。同时,也更符合原生的开发习惯,并且忽略 jsBridge 层的存在。

最后,附上两个库的地址

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

推荐阅读更多精彩内容