WebViewJavascriptBridge使用说明(IOS)

因为最近项目需要跨平台,在网上找到这个demo拿来用。首先简单说一下跨平台:由于现在很多产品都是有安卓版跟ios版,就意味着同一样东西要出两套,由两组人去完成,不仅增加了开发成本,也大大加剧了维护成本。聪明的coder想出了跨平台的思路,用html写页面,分别用webview(ios),(安卓)来加载,对某些html无法调用的硬件,通过双方的交互来实现方法的互调和传值。这个过程就是跨平台。

  下面来说一下WebViewJavascriptBridge在ios端怎么样使用。首先确保一份已经配好功能的html文件。(html还在学习阶段,暂时就不卖弄了。。。)

  1.初始化一个webview(viewdidload)

UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:webView];

  2.将此webview与WebViewJavascriptBridge关联(viewdidload)

if (_bridge) { return; }
    UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:webView];
    [WebViewJavascriptBridge enableLogging];
    _bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"ObjC received message from JS: %@", data);
        responseCallback(@"Response for message from ObjC");

    }];

ps:此时你的webview就与js搭上桥了。下面就是方法的互调和参数的互传。

(1) js调oc方法(可以通过data给oc方法传值,使用responseCallback将值再返回给js)

[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback called: %@", data);
        responseCallback(@"Response from testObjcCallback");
    }];

这里注意testObjcCallback这个方法的标示。html那边的命名要跟ios这边相同,才能调到这个方法。当然这个名字可以两边商量着自定义。简单明确即可。

(2)oc调js方法(通过data可以传值,通过  response可以接受js那边的返回值 )

id data = @{ @"greetingFromObjC": @"Hi there, JS!" };
    [_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
        NSLog(@"testJavascriptHandler responded: %@", response);
    }];

注意这里的  testJavascriptHandler也是个方法标示。

(3)oc给js传值(通过  response接受返回值 )

[_bridge send:@"A string sent from ObjC to JS" responseCallback:^(id response) {
        NSLog(@"sendMessage got response: %@", response);
    }];

(4)oc给js传值(无返回值)

[_bridge send:@"A string sent from ObjC after Webview has loaded."];

源码下载地址:https://github.com/marcuswestin/WebViewJavascriptBridge

源码原理解析:http://www.2cto.com/kf/201503/384998.html

时间: 2024-10-30 02:04:03

WebViewJavascriptBridge使用说明(IOS)的相关文章

OC-JS交互(WebViewJavascriptBridge使用说明)

首先确保一份已经配好功能的html文件. 1.初始化一个webview(viewdidload) UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; [self.view addSubview:webView]; 2.将此webview与WebViewJavascriptBridge关联(viewdidload) if (_bridge) { return; } [WebViewJavascriptBr

WebViewJavascriptBridge实现js与android和ios原生交互

1.实现原生与js交互     <!-- 申明交互 这段代码固定必须有 --> function setupWebViewJavascriptBridge(callback) {     //android使用     if (window.WebViewJavascriptBridge) {         callback(window.WebViewJavascriptBridge)     } else {         document.addEventListener(     

iOS与H5交互的方案

iOS与H5交互的方案 纵观所有iOS与H5交互的方案,有以下几种: 第一种:有很多的app直接使用在webview的代理中通过拦截的方式与native进行交互,通常是通过拦截url scheme判断是否是我们需要拦截处理的url及其所对应的要处理的功能是什么.任意版本都支持. 第二种:iOS7之后出了JavaScriptCore.framework用于与JS交互,但是不支持iOS6,对于还需要支持iOS6的app,就不能考虑这个了.若需要了解,看最后的推荐阅读. 第三种:WebViewJava

Ios开发之 -- js和ios的交互

==WebViewJavascriptBridge的介绍== #下载:https://github.com/marcuswestin/WebViewJavascriptBridge #关于WebViewJavascriptBridge的介绍:http://blog.csdn.net/yanghua_kobe/article/details/8209751 ==WebViewJavascriptBridge(在与现有的业务代码结合使用中)的小问题== *demo部分(  ExampleApp.ht

Objective-c与js交互专题

1     原理 在写 JavaScript 的时候,可以使用一个叫做 window 的对象,像是我们想要从现在的网页跳到另外一个网页的时候,就会去修改 window.location.href 的位置:在我们的 Objective-C 程序码中,如果我们可以取得指定的 WebView 对象,也就可以拿到这个出现在 JavaScript 中的 window 对象,也就是 [webView windowScriptObject]. 这个对象就是 WebView 里头的 JS 与我们的 Object

iPhone 和 iPad的ios 开发中 利用 WebViewJavascriptBridge组件,通过 UIWebView 对Html进行双向通讯

本文转载至 http://blog.csdn.net/remote_roamer/article/details/7261490 WebViewJavascriptBridge 项目的 官网 https://github.com/marcuswestin/WebViewJavascriptBridge 主要过程: 下载WebViewJavascriptBridge.h 和 WebViewJavascriptBridge.m文件到自己的项目中,并添加到项目. 在相应的.h文件中 使用#import

李洪强iOS开发之 - WebViewJavascriptBridge

李洪强iOS开发之 - WebViewJavascriptBridge 01 - JS端:   02 - iOS端 遵守代理协议 申明属性 开启日志 给哪个webview建立JS与Objc的沟通桥梁 bridge设置代理

iOS中html5的交互:WebViewJavascriptBridge

https://github.com/marcuswestin/WebViewJavascriptBridge Setup & Examples (iOS & OSX) Start with the Example Apps/ folder. Open either the iOS or OSX project and hit run to see it in action. To use a WebViewJavascriptBridge in your own project: 1)

WebViewJavascriptBridge 使用 js调iOS原生代码

js代码和原生ios代码进行交互使用WebViewJavascriptBridge非常简化了我们的操作特别是在ios这边 js 掉用ios原生代码时要注意的几个事项: 1.js和ios定义好相互调用的各自要掉用对方的函数名 2.ios中的操作: a.创建一个bridge对象self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView]; b.注册ios中给js回调的代码[self.bridge registerHandler:@"