使用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. Thinkphp 3.2.3配置百度编辑器（UEditor）

    Thinkphp 3.2.3配置百度编辑器(UEditor) 1.把百度编辑器放到项目的Public目录下 命名为:UEditor 2.找到thinkphp框架系统自带类中的Html.class.ph ...

  2. [codeup] 1128 出租车费

    题目描述 某市出租车计价规则如下:起步4公里10元,即使你的行程没超过4公里:接下来的4公里,每公里2元:之后每公里2.4元.行程的最后一段即使不到1公里,也当作1公里计费. 一个乘客可以根据行程公里 ...

  3. JDK动态代理[2]----JDK动态代理的底层实现之Proxy源码分析

    在上一篇里为大家简单介绍了什么是代理模式?为什么要使用代理模式?并用例子演示了一下静态代理和动态代理的实现,分析了静态代理和动态代理各自的优缺点.在这一篇中笔者打算深入源码为大家剖析JDK动态代理实现 ...

  4. 网络爬虫（一）：配置selenium、pycharm（windows平台）

    最近在学习爬虫的编写,使用selenium模块时候,遇到了很多坑,本blog的目的是总结一下遇到的坑和解决办法,以便后来人少走弯路! 以下介绍均以Python3.x为基准进行,基于windows平台的 ...

  5. [转]Configure Network Drive Visible for SQL Server During Backup and Restore Using SSMS

    本文转自:https://mytechmantra.com/LearnSQLServer/Configure-Network-Drive-Visible-for-SQL-Server-During-B ...

  6. val();html();.text()区别

    对于innerHTML 属性,几乎所有的元素都有innerHTML属性,它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML.(获取HTML当前标签的起始和结束里面的内容) 对于inner ...

  7. [日常] Apache Order Deny,Allow的用法

    Order Deny,Allow的用法:影响最终判断结果的只有两点:1. order语句中allow.deny的先后顺序,最后的是最优先的:2. allow.deny语句中各自包含的范围. 常用:Or ...

  8. 撩课-Web大前端每天5道面试题-Day26

    1.vuejs与angularjs以及react的区别? .与AngularJS的区别 相同点: 都支持指令:内置指令和自定义指令. 都支持过滤器:内置过滤器和自定义过滤器. 都支持双向数据绑定. 都 ...

  9. SpringBoot集成Jersey

    SpringBoot集成Jersey 添加依赖 <dependency> <groupId>org.springframework.boot</groupId> & ...

  10. C#跨窗体传值

    果然C#的跨窗体传值比vb难得多,vb就定义一个全局变量就ok,但是C#还要考虑到命名空间的问题 frmMain要调用LoginUI的两个值,但是在此同时,frmMain又要引用LoginUI,所以说 ...