使用WebViewJavascriptBridge与UIWebView交互

https://github.com/marcuswestin/WebViewJavascriptBridge

核心的地方:

UIWebView在加载完网页之后,通过方法stringByEvaluatingJavaScriptFromString:来让这个webView执行js脚本,之后想干啥干啥.

注意:必须是加载完之后!

使用

下载源码拖入工程.

使用一个本地的html文件.

<!doctype html>

<html><head>

    <style type='text/css'>

        html { font-family:Helvetica; color:#222; }

        h1 { color:steelblue; font-size:24px; margin-top:24px; }

        button { margin:0 3px 10px; font-size:12px; }

        .logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }

    </style>

</head><body>

    <h1>WebViewJavascriptBridge Demo</h1>

    <!--脚本开始的地方-->

    <script>

    window.onerror = function(err) {

        log('window.onerror: ' + err)

    }

    <!--申明方法-->

    function connectWebViewJavascriptBridge(callback) {

        if (window.WebViewJavascriptBridge) {

            callback(WebViewJavascriptBridge)

        } else {

            document.addEventListener('WebViewJavascriptBridgeReady', function() {

                callback(WebViewJavascriptBridge)

            }, false)

        }

    }

    <!--激活方法-->

    connectWebViewJavascriptBridge(function(bridge) {

        var uniqueId = 1

        function log(message, data) {

            var log = document.getElementById('log')

            var el = document.createElement('div')

            el.className = 'logLine'

            el.innerHTML = uniqueId++ + '. ' + message + (data ? ':<br/>' + JSON.stringify(data) : '')

            if (log.children.length) { log.insertBefore(el, log.children[0]) }

            else { log.appendChild(el) }

        }

        bridge.init(function(message, responseCallback) {

            log('JS got a message', message)

            var data = { 'Javascript Responds':'Wee!' }

            log('JS responding with', data)

            responseCallback(data)

        })

        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)

        })

        <!--创建一个按钮-->

        var button = document.getElementById('buttons').appendChild(document.createElement('button'))

        button.innerHTML = 'Send message to ObjC'

        button.onclick = function(e) {

            e.preventDefault()

            <!--此处是你传参数的地方-->

            var data = 'YouXianMing'

            log('JS sending message', data)

            bridge.send(data, function(responseData) {

                log('JS got response', responseData)

            })

        }

        document.body.appendChild(document.createElement('br'))

    })

    <!--脚本结束的地方-->

    </script>

    <div id='buttons'></div> <div id='log'></div>

</body></html>

RootViewController代码如下:

//

//  RootViewController.m

//  WebViewJavascriptBridge

//

//  Copyright (c) 2014年 Y.X. All rights reserved.

//

#import "RootViewController.h"

#import "WebViewJavascriptBridge.h"

@interface RootViewController ()<UIWebViewDelegate>

@property (nonatomic, strong) UIWebView                *webView;

@property (nonatomic, strong) WebViewJavascriptBridge  *bridge;

@end

#define BUNDLE_FILE(fileName)  [[NSBundle mainBundle] pathForResource:fileName ofType:nil];

#define HTML_STRING(htmlPath)  [NSString stringWithContentsOfFile:htmlPath \

encoding:NSUTF8StringEncoding error:nil]

#define FILE_URL(path)         [NSURL fileURLWithPath:path]

@implementation RootViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    // 获取本地html文件

    NSString *htmlPath = BUNDLE_FILE(@"demo.html");

    // 初始化UIWebView并添加进view中

    _webView = [[UIWebView alloc] initWithFrame:self.view.bounds];

    [_webView loadHTMLString:HTML_STRING(htmlPath)

                     baseURL:FILE_URL(htmlPath)];

    [self.view addSubview:_webView];

    // 让UIWebView执行脚本并监听回调

    _bridge = [WebViewJavascriptBridge bridgeForWebView:_webView handler:^(id data, WVJBResponseCallback responseCallback) {

        // 监听回调

        NSLog(@"%@", data);

    }];

}

@end

执行效果如下:

分析

WebViewJavascriptBridge.m 的源码里面有写着让webView执行js脚本的地方哦.

其实,我们只需要能够从UIWebView获取到值就行了,我们才不需要把值传递给UIwebView呢,有了这个UIWebView给iOS传值的功能,基本上能满足我们大部分的需求了哦.

最后,我将html页面进行修改,精简到大家能看懂为止:).

demo.html

<!doctype html>

<html><head>

    <style type='text/css'>

        html { font-family:Helvetica; color:#222; }

        h1 { color:steelblue; font-size:24px; margin-top:24px; }

        button { margin:0 3px 10px; font-size:12px; }

        .logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }

    </style>

</head><body>

    <h1>UIWebView与iOS直接交互</h1>

    <!--脚本开始的地方-->

    <script>

    <!--申明方法-->

    function connectWebViewJavascriptBridge(callback) {

        if (window.WebViewJavascriptBridge) {

            callback(WebViewJavascriptBridge)

        } else {

            document.addEventListener('WebViewJavascriptBridgeReady', function() {

                callback(WebViewJavascriptBridge)

            }, false)

        }

    }

    <!--激活方法-->

    connectWebViewJavascriptBridge(function(bridge) {

        <!--创建一个按钮-->

        var button = document.getElementById('buttons').appendChild(document.createElement('button'))

        button.innerHTML = '给iOS发送信息'

        <!--按钮点击事件的实现-->

        button.onclick = function(e) {

            e.preventDefault()

            <!--此处是你传参数的地方-->

            var data = 'YouXianMing - Just so easy :)'

            <!--使用bridge中的send发送数据-->

            bridge.send(data, function(responseData) {

            })

        }

        document.body.appendChild(document.createElement('br'))

    })

    <!--脚本结束的地方-->

    </script>

    <div id='buttons'></div> <div id='log'></div>

</body></html>

以下是修改后的执行效果:

附录:

WebViewJavascriptBridge与UIWebView交互原理

使用WebViewJavascriptBridge与UIWebView交互的更多相关文章

  1. 利用WebViewJavascriptBridge与UIWebView进行交互

    事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS ...

  2. UIWebview交互之自己定义传值跳转

    UIWebview常常会用到和原生页面的跳转.有的可能还须要传值跳转.自己写了一个自己定义跳转的webview,能够跳转到指定控制器并传值,这须要和后台协商好.html中怎样传值跳转,即:html中的 ...

  3. iOS-JS交互 (WebViewJavascriptBridge)

    , , , );     messageButton.titleLabel.font = font;     messageButton.backgroundColor = [UIColor colo ...

  4. UIWebView与JS的深度交互

    我要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img &g ...

  5. UIWebView与JS的深度交互-b

    要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img > ...

  6. iOS下JS与OC互相调用（五）--UIWebView + WebViewJavascriptBridge

    WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...

  7. OC与JS交互之UIWebView

    随着H5的强大,hybrid app已经成为当前互联网的大方向,单纯的native app和web app在某些方面显得就很劣势.关于H5的发展史,这里有一篇文章推荐给大家,今天我们来学习最基础的基于 ...

  8. iOS中html5的交互：WebViewJavascriptBridge

    https://github.com/marcuswestin/WebViewJavascriptBridge Setup & Examples (iOS & OSX) Start w ...

  9. [转]OC与JS的交互详解

    事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS ...

随机推荐

  1. 详解ruby的attr_accessor和cattr_accessor

    原文地址:http://lee2013.iteye.com/blog/1098914 1. attr_accessor的用法相当简单, 就相当于getter和setter,看一个类就知道怎样用了: c ...

  2. 【LeetCode题解】169_求众数（Majority-Element）

    目录 169_求众数(Majority-Element) 描述 解法一:暴力法 思路 Java 实现 Python 实现 复杂度分析 解法二:哈希表 思路 Java 实现 Python 实现 复杂度分 ...

  3. 浅析人脸检测之Haar分类器方法：Haar特征、积分图、 AdaBoost 、级联

    浅析人脸检测之Haar分类器方法 一.Haar分类器的前世今生 人脸检测属于计算机视觉的范畴,早期人们的主要研究方向是人脸识别,即根据人脸来识别人物的身份,后来在复杂背景下的人脸检测需求越来越大,人脸 ...

  4. [转]VS2012正则查找

    本文转自:http://blog.csdn.net/u013688451/article/details/52840325 工作中有时需要用到 正则查找,例如 想找 所有用到 某个数据库表的地方 st ...

  5. 小白学习之Code First（五）

    Fluent API:另一种配置实体类的方式,它比DataAnnorations提供了更多的配置 其中EntityTypeConfiguration这个类提供了重要的属性.方法来配置对应的实体类,可以 ...

  6. datatable 转excel

    public static void ExportToExcel(System.Data.DataTable dt) { if (dt == null) return; Microsoft.Offic ...

  7. 扩展jquery插件的方式

  8. 532 -数组中的K-diff对

    例1: 输入: [3,1,4,1,5],k = 2  输出: 2 说明:阵列中有两个2-diff对,(1,3)和(3,5). 虽然我们在输入中有两个1,但我们应该只返回唯一对的数量. 例2: 输入: ...

  9. 【 js 片段 】移动端适配简易步骤

    手机端全部适配简易步骤,不确保没有bug. 1.HTML 的 head 部分中加入如下代码: <meta name="viewport" content="widt ...

  10. BZOJ4337: BJOI2015 树的同构(hash 树同构)

    题意 题目链接 Sol 树的同构问题,直接拿hash判一下,具体流程大概是这样的: 首先转化为有根树,预处理出第\(i\)棵树以\(j\)为根时的hash值. 那么两个树同构当且仅当把两棵树的hash ...