码迷,mamicode.com
首页 > 编程语言 > 详细

UIWebView中JS与OC交互 WebViewJavascriptBridge的使用

时间:2017-10-12 22:53:30      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:请求   通过   hub   cin   第三方   参数   本地   注入js   selector   

一、综述

  现在很多的应用都会在多种平台上发布,所以很多程序猿们都开始使用Hybrid App的设计模式。就是在app上嵌入网页,只要写一份网页代码,就可以跑在不同的系统上。在iOS中,app多是通过WebView来加载网页,由于功能需求等原因,代码中少不得要和跟网页交互。

二、原理

  在iOS中,本地调用Javascript语言,是通过UIWebView中的实例方法stringByEvaluatingJavaScriptFromString:来实现的,该方法通过字符串对象的形式传入JS代码。

1
[webView stringByEvaluatingJavaScriptFromString:@"Math.random();"];

   而JS调用本地的代码,则并没有现成的API,而是需要间接地通过一些方法来实现。我们利用UIWebView的代理方法,当UIWebView发起的所有网络请求,都可以通过delegate函数在Native层得到通知。这样,我们就可以在UIWebView内发起一个自定义的网络请求,比如:‘wvjbscheme://__BRIDGE_LOADED__‘。于是在UIWebView的delegate函数中,我们拦截url,只要发现是我们自定义的url,就不进行内容的加载,转而执行相应的调用逻辑。

三、WebViewJavascriptBridge的使用

1、WebViewJavascriptBridge简介

  WebViewJavascriptBridge支持到iOS6之前的版本的,用于支持native的iOS与javascript交互,接下来讲讲WebViewJavascriptBridge的基本原理及应该如何去使用,包括iOS端的使用和JS端的使用。

  首先,看看WebViewJavascriptBridge.m中Webview代理拦截的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- (void)webView:(WebView *)webView decidePolicyForNavigationAction:(NSDictionary *)actionInformation request:(NSURLRequest *)request frame:(WebFrame *)frame decisionListener:(id<WebPolicyDecisionListener>)listener
{
    if (webView != _webView) { return; }
     
    NSURL *url = [request URL];
    if ([_base isCorrectProcotocolScheme:url]) {
        if ([_base isBridgeLoadedURL:url]) {
            [_base injectJavascriptFile];
        else if ([_base isQueueMessageURL:url]) {
            NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
            [_base flushMessageQueue:messageQueueString];
        else {
            [_base logUnkownMessage:url];
        }
        [listener ignore];
    else if (_webViewDelegate && [_webViewDelegate respondsToSelector:@selector(webView:decidePolicyForNavigationAction:request:frame:decisionListener:)]) {
        [_webViewDelegate webView:webView decidePolicyForNavigationAction:actionInformation request:request frame:frame decisionListener:listener];
    else {
        [listener use];
    }
}

   WebViewJavascriptBridge是通过webview的代理拦截scheme,然后注入相应的JS,在拦截后,通过先通过-isBridgeLoadedURL:方法判断URL是否是需要bridge的URL,若是,则通过injectJavascriptFile方法注入JS;否则判断URL是否是队列消息,若是,则执行查询命令JS并刷新消息队列;如果都不匹配,URL被识别为未知的消息。

 

2、WebViewJavascriptBridge的使用

  首先,要在JS中接入这个框架,这段代码是不变的

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 *  此为js接入框架的函数
 */
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)
}

 

  然后OC要调用到的JS函数要在下面函数中使用bridge.registerHandler来注册,而且JS需要调用的OC方法也要在下面的函数中用bridge.callHandler调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
 *  OC调用的JS函数需在此处注册,调用OC方法也需要在此处调用
 */
    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) }
        }
                                  
        //注册一个给OC调用的函数,不带参数
        bridge.registerHandler(‘WebViewDidLoad‘,function() {
            log("WebViewDidLoad")
        })
         
        //注册一一个给OC调用的函数,接受OC传来的一个参数和一个回调处理
        bridge.registerHandler(‘OC_Call_JS‘, function(data, responseCallback) {
            log(‘oc调用js -‘, data)
            var responseData = { ‘Javascript response‘:‘oc调用JS成功!‘ }
            log(‘js被调用后响应-‘, responseData)
            responseCallback(responseData)
        })
 
        document.body.appendChild(document.createElement(‘br‘))
 
        var callbackButton = document.getElementById(‘buttons‘).appendChild(document.createElement(‘button‘))
        callbackButton.innerHTML = ‘JS_Call_ObjC‘
        callbackButton.onclick = function(e) {
            e.preventDefault()
            log(‘JS call OC‘)
            //此处调用OC方法
            bridge.callHandler(‘JS_Call_ObjC‘, {‘foo‘‘bar‘}, function(response) {
                log(‘JS call OC sucess and get OC rsp‘, response)
            })
        }
    })

  需要注意的是:在setupWebViewJavascriptBridge(function(bridge) {}函数体内的代码不能有错误,不然会导致不任何回调,不打印日志(JS的是脚本语言,跑到错的地方就不跑了)。

 

  OC部分,首先打开框架的日志系统,然后关联webView

1
2
3
[WebViewJavascriptBridge enableLogging];
     
    _bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

   JS需要调用的OC方法,要在OC代码中注册

1
2
3
4
[_bridge registerHandler:@"JS_Call_ObjC" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"JS调用OC: %@", data);
        responseCallback(@"OC被调用后响应:调用成功!");
    }];

   而想要调用JS中注册过的函数,在需要的地方用实例方法callHandler调用就可以了

1
2
3
4
id data = @{ @"OC调用JS": @"Hi there, JS!" };
[_bridge callHandler:@"OC_Call_JS" data:data responseCallback:^(id response) {
    NSLog(@"testJavascriptHandler responded: %@", response);
}];

 

四、小结

  最近因为项目需要,正在边学边做Hybrid App,刚好用到这个第三方,就写了篇文分享出来,希望能帮到刚刚入手的人,以上实例的demo地址https://github.com/GarenChen/WebViewJSBridgeDemo喜欢的顺手给个star ^_^;

推荐一些阅读:

JSBridge——Web与Native交互之iOS篇:http://www.jianshu.com/p/9fd80b785de1

Hybrid App 开发模式:http://www.tuicool.com/articles/riE3Yn

WebViewJavascriptBridge:https://github.com/marcuswestin/WebViewJavascriptBridge

UIWebView中JS与OC交互 WebViewJavascriptBridge的使用

标签:请求   通过   hub   cin   第三方   参数   本地   注入js   selector   

原文地址:http://www.cnblogs.com/sunfuyou/p/7658393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!