JavaScript相关 前端杂七杂八
2023年1月7日

WebView 与 JS 交互方案 – 适用 Android & iOS

作者 admin

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有两个：testObjcCallback和testJavascriptHandler

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有两个：testObjcCallback和testJavascriptHandler

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 层的存在。

最后，总结一下：

1.基于webview的 —–

1-1.ifram，创建空模块发送指定url带参数传递给原生，客户端通过拦截这个请求（结合jsBridge）

1-2.localtion.href = xxx带参数传过去(如果连续多次修改,原生层只能接收到最后一次请求，前面的请求都会被忽略掉。)

2.jsBridge-拦截请求，解析请求，返回数据(三端封装)

3.跨页面传递，window.parent.postMassage搭配message，挂在window对象，无跨域限制(搭配ifram)

标签javascript

17 条评论在 “WebView 与 JS 交互方案 – 适用 Android & iOS”

  • Monycle说道：
    2024年8月29日 上午7:29

    1 The pathogenesis is not completely understood dapoxetine priligy

    回复
  • Dardeerge说道：
    2024年11月10日 下午7:55

    priligy pills 2 Novel non cytotoxic approaches to sarcoma treatment

    回复
  • Dardeerge说道：
    2024年11月14日 下午5:17

    When middle class families have less to spend, businesses have fewer customers priligy walgreens

    回复
  • cytotec online order说道：
    2024年11月28日 下午2:56

    The first category, procedural knowledge, includes those factors pertinent to daily practice and is usually specific to a given location can i purchase cheap cytotec without a prescription In renal cell cancer, overexpression of CAIX is common and the possible role of CAIX targeting antibodies WX G250, Rencarex is currently being evaluated in phase III trials for this entity 52

    回复
  • cytotec rectally说道：
    2024年12月1日 下午6:09

    buy cytotec pill Does it work against new variants of SARS CoV 2 virus

    回复
  • vinyl casino login fehler说道：
    2025年12月21日 上午12:37

    Die Unterkunft liegt in 4 km Entfernung vom Stadtzentrum. South
    Street Seaport ist 2,9 km vom Hotel entfernt und Long
    Island University Brooklyn Campus ist 5 Gehminuten davon entfernt.
    Dieses Boutique-Hotel liegt in der Innenstadt von New York.
    Baseballstadion Citi Field ist 1 km von Holiday Inn Laguardia Airport New York und Hinton Park ist 300 Meter entfernt.
    Baseballstadion Citi Field ist 7 km vom Hotel entfernt und die Bushaltestelle Maurice Avenue
    & 54 Avenue ist 300 Meter von der Unterkunft entfernt.
    Das Hotel verfügt auch über fast ein Dutzend Bars und Nachtclubs, die eine weitgehend jugendliche Zielgruppe ansprechen, darunter Nine Fine Irishmen, die Bar am Times Square (eine Piano-Bar) und die
    Center Bar, die sich im Zentrum des Hauptcasinos befindet.
    Dyckman House ist 2,2 km und The Cloisters ist
    10 Minuten zu Fuß vom Hotel entfernt. Eine Gemeinschaftslounge und Barbecue-Grills sind im Holiday Inn New York Jfk Airport
    Area verfügbar, und Brookville Park ist 2,3 km entfernt.
    High Line ist 3,2 km von Even Midtown East – Grand Central, An Ihg Hotel
    New York und UN-Hauptquartier ist 550 Meter entfernt.
    Das Hotel bietet den perfekten Standort 4 km vom New York-Stadtzentrum.
    National September 11 Memorial und Museum ist nur
    4,9 km vom Hotel entfernt.
    Die Unterkunft liegt in 5 km Entfernung vom New York-Stadtzentrum.
    Das Boutique-Hotel bietet WLAN im ganzen Gebäude und verfügt über ein Business-Center
    und ein Kopiergerät. Eine Gemeinschaftslounge und eine Bar sind
    im Crowne Plaza Jfk Airport New York City, An Ihg Hotel verfügbar, und Idlewild Park ist 3,9 km
    entfernt. Chrysler Building ist 500 Meter und Öffentliche Bücherei New York Public
    Library ist ungefähr 1,1 km von der Unterkunft entfernt.
    Rund zwei Autostunden von New York entfernt
    liegt das spätestens durch die Fernsehserie “Boardwalk Empire”
    bekannt gewordene Atlantic City. Das New York-New York Hotel & Casino liegt im Herzen des Las Vegas Strips und bietet einen lebhaften Aufenthalt mit einer
    Vielzahl von Unterhaltungsmöglichkeiten.

    References:
    https://online-spielhallen.de/legzo-casino-mobile-app-ihr-schlussel-zum-mobilen-spielvergnugen/

    回复
  • CashWin Casino Einzahlungsbonus说道：
    2025年12月21日 上午7:13

    Dies funktioniert so, dass die Online Casinos Dich dazu auffordern, einen bestimmten Wert des Bonus
    ohne Einzahlung zu setzen, um ihn zu erhalten. Wie bereits erwähnt, zahlst Du im
    Voraus kein eigenes Geld ein, um Zugang zu einem Bonus im Online
    Casino zu erhalten. Um das kostenlose Geld zu erhalten, musst Du nach Deiner
    Anmeldung häufig noch einen Teil Deines eigenen Geldes ausgeben.
    Einige Anbieter verlangen, dass die zurückgezahlten Einsätze einfach umgesetzt werden,
    sodass der erhalteneCashback Bonus den 1-fachen Umsatzanforderungen unterliegt.

    Auch wenn du auf der Suche nach einem Einzahlungsbonus
    bist, bei dem du keine Umsatzbedingungen erfüllen musst, haben wir an dieser Stelle keine guten Neuigkeiten für dich.

    Durch die Nutzung dieser Gutscheine kann dann entweder ein kostenloses Guthaben oder im besten Fall auch Freispiele genutzt werden.
    Mit einem Casino Bonus ohne Einzahlung können Sie sofort um
    echtes Geld spielen und müssen keinen Cent einzahlen. Ein Casino Bonus ohne Einzahlung, oft
    bestehend aus Freispielen ohne Einzahlung, ist
    eine Rarität, der echte Gewinne bringen kann. Lest unseren OnlyWin Testbericht und holt euch
    auch den Willkommensbonus von 100% bis zu 400 € + 100 Freispiele.
    Unsere aktuellen No Deposit Bonus Angebote 2025 für Deutschland & Österreich ermöglichen euch den direkten Start
    mit Gratis Freispielen oder gratis Bonusguthaben. Mit einem
    Casino Bonus ohne Einzahlung 2025 könnt ihr sofort risikofrei
    in neuen Online Casinos spielen und echte Gewinne erzielen und das ganz ohne Einzahlung.

    References:
    https://online-spielhallen.de/1go-casino-aktionscodes-ihr-schlussel-zu-exklusiven-vorteilen/

    回复
  • 500 slot machines说道：
    2025年12月27日 上午4:53

    It’s a luxurious gaming venue that’s beautiful inside and out and caters for low and high
    rollers. We go through the rest of the casino’s features in our guide.
    The Jupiter casino on the magnificent gold coast is an equally impressive venue that simply oozes elegance, style and fun. With views
    stretching across the Yarra River and downtown Melbourne,
    the Crown casino is situated in the perfect location.
    It opened its doors in 1994, offering a boutique casino experience tailored for
    leisurely gaming with over 150 slot machines.
    It provides a dynamic gaming environment with over 2,500 slot machines, 47 table games, and a state-of-the-art poker room.
    This more intimate casino features over 500 slot machines, eight table games,
    and a bar with a selection of dining options. The casino also offers a hotel
    with luxury rooms, a variety of dining options, and an event center.
    Casinos in Michigan offer a vibrant hub for entertainment, drawing both locals
    and tourists to experience a diverse range of gaming options.
    Quite simply, if you are looking for a casino that offers a diversity of
    table games in Las Vegas, the Golden Nugget has to be your choice according to CNN’s Matt Villano.

    It also features a sports betting area, the PressBox Sports Bar and Grill, enhancing the gaming experience.
    While it does not feature a traditional sportsbook, the casino ensures a varied gaming experience.
    Additionally, it houses the TwinSpires Sportsbook, offering a robust sports betting experience.

    Similar to its sister properties, it offers access to sports betting through a
    partnership with Kambi Group.

    回复
  • low stake casinos Australia说道：
    2025年12月27日 上午9:37

    He is happy to welcome players, offering a powerful welcome bonus of A$2,500 + 250 Free Spins so
    newcomers feel confident. For those seeking a premium online casino experience,
    King Billy is the clear choice. As a valued player, you’ll also
    enjoy our tiered VIP program, with perks like priority
    withdrawals, personalized support, and a dedicated
    VIP manager. With an astonishing 5,000+ games at your fingertips, you’ll never run out of options to try your luck.
    With over 5,000 games at your fingertips, you’ll be spoiled for choice – from classic slots to
    thrilling table games and live dealer action. Every player must
    return all withdrawn duplicate account funds when casino management requests it.

    Online pokies, table games like blackjack and roulette, and live dealer experiences are
    all available. King Billy Casino boasts an impressive library of over 5,000 games catering to Australian players’ preferences.
    King Billy’s got the goods – a whopping 5,000+ games to
    play, and we’re not just talking about your run-of-the-mill slots (although, Kingbillywin Casino, they do have some seriously cool ones!).

    References:
    https://blackcoin.co/54_highest-rtp-slots-the-14-best-paying-slot-machines_rewrite_1/

    回复
  • Mega Moolah APK download说道：
    2025年12月27日 下午12:04

    To create your new online casino account, you will have to fill out
    the sign-up form and verify your information. That’s why they often stock the latest online pokies,
    table games, jackpots, and live dealer games, all from the industry’s best software providers.
    Joining a new online casino has its advantages.

    Join our newsletter and get the lowdown on the latest pokies, top bonuses, and
    new casinos – no bluffing! Not all games
    and game developers have the same selection and quality,
    so we always check a casino’s library to see if they have a wide variety of casino games from
    trusted companies.
    If you are a slot lover and always look for a fresh new challenge to conquer, new online slot games
    hit the nail on the head. As a gambler, you may understand why no deposit cash bonuses
    retain such an irresistible charm. When you’re trying to understand
    the current prospect of online casino legalization in New York, you need to be able
    to understand its history. BetRivers.net brings the excitement of
    a top-tier casino directly to your screen with daily free bonuses and a wide selection of virtual slots, blackjack, roulette,
    and more. Social casinos are a great option for casual gaming, community interaction, and practicing strategies without any financial risk.
    These offer a full range of table games and slots in a physical setting.

    References:
    https://blackcoin.co/rooli-casino-in-depth-review/

    回复
  • Canberra entertainment options说道：
    2025年12月27日 下午9:25

    In February 2006, Microsoft announced that it intended to expand
    its Redmond campus by 1,100,000 square feet (100,000 m2) at a cost of $1 billion and said that this would create space for between 7,000 and 15,000 new employees over the following three years.
    The more viewers engage (for example, via live chat
    messages, Super Chat, Super Stickers, or gifts) the higher they
    may rank on the leaderboard. As you engage in the live stream, keep an eye out for
    the crown icon at the top of the live chat. The top 3 engaged viewers even get a special badge next to their name in the live chat!

    The first major expansion of the campus came in 1992, bringing the total amount of
    office space to 1.7 million square feet (160,000 m2) on 260 acres
    (110 ha) of land.
    A new pedestrian bridge over State Route 520 links
    East and West Campuses, extends a local bike trail,
    and connects to Sound Transit’s Redmond Technology Station. Green Building Council’s LEED Platinum certification and
    the International Living Future Institute’s Zero Carbon certification and has achieved Salmon Safe Certification. These efforts
    have made low-carbon concrete the default option for local suppliers,
    with no cost premium. The Pedestrian Bridge connects Microsoft’s East and West Campus,
    creating a direct connection between the distinct areas of campus while also eliminating the need for cars to traverse campus.
    Terraces integrated with the buildings allow for connection with nature,
    and are planted with native species, irrigated with stored rainwater.
    Help your students connect and achieve more together, whether in the classroom, at home, or around the globe online with
    collaborative tools.

    References:
    https://blackcoin.co/bars-the-classic-slot-machine-theme/

    回复
  • clicknaukari.com说道：
    2025年12月29日 上午7:40

    online casino that accepts paypal

    References:
    clicknaukari.com

    回复
  • https://www.refermee.com/说道：
    2025年12月29日 上午7:54

    paypal casino usa

    References:
    https://www.refermee.com/

    回复
  • https://judicioushr.com/说道：
    2025年12月30日 上午4:57

    paypal casino online

    References:
    https://judicioushr.com/

    回复
  • https://careerjungle.viakasi.co.za/employer/best-paypal-casino-sites-uk-2025-gambling-list-you-can-trust/说道：
    2025年12月30日 上午6:16

    online casino for us players paypal

    References:
    https://careerjungle.viakasi.co.za/employer/best-paypal-casino-sites-uk-2025-gambling-list-you-can-trust/

    回复
  • www.chdlrrhd.site说道：
    2025年12月30日 上午10:55

    online casinos that accept paypal

    References:
    http://www.chdlrrhd.site

    回复
  • https://backtowork.gr/employer/best-online-slots-sites-for-real-money-2025-top-10-trusted-picks说道：
    2025年12月30日 上午11:03

    online casinos that accept paypal

    References:
    https://backtowork.gr/employer/best-online-slots-sites-for-real-money-2025-top-10-trusted-picks/

    回复

向https://www.refermee.com/进行回复 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注