使用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. .bat学习-基础语法(常用)

    一般来说,脚本或者语言都有相同地方 定义变量,输入,输出,判断条件等等.知道的相同之处,我们就可以借助强大的搜索引擎进行查找我们想要知道的东西. bat为批处理脚本BATCH.现在只知道是使用于win ...

  2. springweb flux websocket

    直接上代码: import org.springframework.stereotype.Component; import org.springframework.web.reactive.sock ...

  3. Innosetup的状态页面和向导页面解释

    1.安装: CurStepChanged所对应的全部状态:3种 1.1. CurStep=ssInstall         --是在程序实际安装前(所有配置都准备好了)     1.2. CurSt ...

  4. oracle 执行的时候,显式输出结果!: set serveroutput on;

  5. C# WebBrowser设置代理

    WebBrowser控件是基于IE浏览器的,所以它的内核功能是依赖于IE. code: class IEProxy { //设置代理选项 private const int INTERNET_OPTI ...

  6. 微信小程序头部栏实现

    效果如图: 也就是实现红色框的部分. wxml代码 <view class="header {{scrollDown?'scrolled':''}}"> <vie ...

  7. .net core 2.2 部署CentOS7（3）安装Xshell操控CentOS7

    目录: .net core 2.2 部署CentOS7(1)安装虚拟机 .net core 2.2 部署CentOS7(2)给虚拟机安装CentOS7 .net core 2.2 部署CentOS7( ...

  8. 比较ArrayList和LinkedList的异同

    1.ArrayList是实现了基于动态数组的数据结构,而LinkedList是基于链表的数据结构: 2.对于随机访问get和set,ArrayList要优于LinkedList; 3.对于添加和删除操 ...

  9. mybatis自动生成代码，逆向工程

    https://gitee.com/yangliuwin/mybatis_reverse_engineering.git

  10. hdu 1885

    Key Task Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...