使用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. 中小团队快速构建SQL自动审核系统

    SQL审核与执行,作为DBA日常工作中相当重要的一环,一直以来我们都是通过人工的方式来处理,效率低且质量没办法保证.为了规范操作,提高效率,我们决定引入目前市面上非常流行的SQL自动审核工具Incep ...

  2. 机器学习--聚类系列--DBSCAN算法

    DBSCAN算法 基本概念:(Density-Based Spatial Clustering of Applications with Noise) 核心对象:若某个点的密度达到算法设定的阈值则其为 ...

  3. fail2ban的使用以及防暴力破解与邮件预警

    fail2ban可以监视你的系统日志,然后匹配日志的错误信息(正则式匹配)执行相应的屏蔽动作(一般情况下是防火墙),而且可以发送e-mail通知系统管理员! fail2ban运行机制:简单来说其功能就 ...

  4. docker 使用compose安装zookeeper集群

    此基础镜像使用的为zookeeper的官方镜像 docker pull zookeeper 新建文件 docker-compose.yml version: ' services: zookeeper ...

  5. 配置alibaba的yum 源

    1, 进入yum源目录 cd /etc/yum.repos.d 2, 备份系统yum配置文件 sudo mv CentOS-Base.repo CentOS-Base.repo.bak 3, 下载al ...

  6. 国际化实现之安装脚手架vue以及打包问题

    做这个项目用的是vue+element UI来实现的响应式布局,现主要说一下国际化这块的实现. 第一步:新建文件夹i18n 第二步:配置cn.js.en.js等文件内容 cn.js import en ...

  7. Prim算法和Kruskal算法求最小生成树

    Prim算法 连通分量是指图的一个子图,子图中任意两个顶点之间都是可达的.最小生成树是连通图的一个连通分量,且所有边的权值和最小. 最小生成树中,一个顶点最多与两个顶点邻接:若连通图有n个顶点,则最小 ...

  8. SpringBoot自动化配置的注解开关原理

    我们以一个最简单的例子来完成这个需求:定义一个注解EnableContentService,使用了这个注解的程序会自动注入ContentService这个bean. @Retention(Retent ...

  9. Java基础教程(18)--继承

    一.继承的概念   继承是面向对象中一个非常重要的概念,使用继承可以从逻辑和层次上更好地组织代码,大大提高代码的复用性.在Java中,继承可以使得子类具有父类的属性和方法或者重新定义.追加属性和方法. ...

  10. redis入门基础

    环境: centos 一.安装 sudo su cd wget http://labfile.oss.aliyuncs.com/courses/106/redis-2.8.4.tar.gz tar - ...