WebViewJavascriptBridge的使用说明

WebViewJavascriptBridge 项目介绍

在Obj-C 和 WKWebView, UIWebView 中的 Javascript之间传送信息的桥梁。

项目地址

如何使用

Javascript的介绍

    <script>

        window.onerror = function(err) {

                log('window.onerror: ' + err)

            }

            //下面的方法是必备

        function setupWebViewJavascriptBridge(callback) {

            if (window.WebViewJavascriptBridge) {

                return callback(WebViewJavascriptBridge);

            }

            if (window.WVJBCallbacks) {

                return window.WVJBCallbacks.push(callback);

            }

            window.WVJBCallbacks = [callback];

            var WVJBIframe = document.createElement('iframe');

            WVJBIframe.style.display = 'none';

            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';

            document.documentElement.appendChild(WVJBIframe);

            setTimeout(function() {

                document.documentElement.removeChild(WVJBIframe)

            }, 0)

        }

        setupWebViewJavascriptBridge(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 + ':<br/>' + JSON.stringify(data)

                if (log.children.length) {

                    log.insertBefore(el, log.children[0])

                } else {

                    log.appendChild(el)

                }

            }

            //JS 注册处理，名字需与 ObjC 一致

            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)

            })

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

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

            callbackButton.innerHTML = 'Fire testObjcCallback'

            callbackButton.onclick = function(e) { // 点击按钮事件

                e.preventDefault();

                log('JS calling handler "testObjcCallback"');

                // JS 向 ObjC 传数据的方式，callHandler（方法标识符， 数据， 回调）

                bridge.callHandler('testObjcCallback', {

                    'foo': 'bar'

                }, function(response) {

                    log('JS got response', response);

                })

            }

        })

    </script>

ObjC 中的使用介绍

引入头文件

#import "WebViewJavascriptBridge.h"

声明变量

@property WebViewJavascriptBridge* bridge;

实现方法

if (_bridge) { return; }

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

    [self.view addSubview:webView];

    [WebViewJavascriptBridge enableLogging];

    _bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

    [_bridge setWebViewDelegate:self];

    [_bridge callHandler:@"testJavascriptHandler" data:@{@"foo":@"before ready"}];

    [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {

        NSLog(@"testObjcCallback called: %@", data);

        NSString *strDD = [NSString stringWithFormat:@"hello world: %@",data];

        responseCallback(strDD);

    }];