UIWebView---WebViewJavascriptBridge

最新推荐文章于 2022-09-27 10:11:18 发布

JsonNero

最新推荐文章于 2022-09-27 10:11:18 发布

阅读量1.5k

点赞数

分类专栏： iOS开发系列文章标签： WebViewJavascriptBri UIWebView

本文链接：https://blog.csdn.net/wsxzk123/article/details/43809585

版权

iOS开发系列专栏收录该内容

41 篇文章 0 订阅

订阅专栏

参考https://github.com/marcuswestin/WebViewJavascriptBridge/blob/master/README.md

http://blog.csdn.net/yanghua_kobe/article/details/8209751

WebViewJavascriptBridge使用

js端和ios端的联系

bridge.init(function(message, responseCallback) （ios端调用send的时候 js端的这个函数会响应）

bridge.registerHandler('testJavascriptHandler',function(data, responseCallback) （ios端调用call handler的时候 js端的这个函数会响应）

bridge.send(data, function(responseData) （js端调用该函数时ios端的 bridgeForWebView。。。。会响应）

bridge.callHandler('testObjcCallback', {'foo':'bar'}, function(response) （js端调用该函数时ios端的 registerHandler。。。。会响应）

JS端怎么写

<!DOCTYPE html>
<html>
    <body>
        <h1 id="id1">I'm Html </h1>
        <button type="button" id = "button1"> send directly</button>
        <button type="button" id = "button2"> call handler </button>
        <script>
            // 这2句是必须写的
            function connectWebViewJavascriptBridge(callback) {
                if (window.WebViewJavascriptBridge) {
                    callback(WebViewJavascriptBridge)
                } else {
                    document.addEventListener('WebViewJavascriptBridgeReady', function() {
                                              callback(WebViewJavascriptBridge)
                                              }, false)
                }
            }
        // 这2句是必须写的
        connectWebViewJavascriptBridge(function(bridge) {
                                       
                                       /* Init your app here */
                                       // 从OC  bridge.send 方法过来的 就会调用到这个方法
                                       bridge.init(function(message, responseCallback) {
                                                   alert('Received message: ' + message)
                                                   if (responseCallback) {
                                                   responseCallback("send Right back atcha")
                                                   }
                                                   })
                                       // 从oc通过Handler发送过来的就会调用这个函数
                                       bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
                                                              var responseData = { 'Javascript Says':'Right back atcha!' }
                                                              alert('Received message: ' + data)
                                                              if (responseCallback) {
                                                              responseCallback(responseData)
                                                              }
                                                              })
                                       
                                       // TODO: 想做点什么在这边（connectWebViewJavascriptBridge函数里面）
                                       //send
                                       var button1 = document.getElementById('button1')
                                       button1.onclick = function() {
                                       var data = 'Hello from JS button'
                                       bridge.send(data, function(responseData) {
                                                   
                                                   })
                                       }
                                       // call handler
                                       var button2 = document.getElementById('button2')
                                       button2.onclick = function() {
                                       // 注意标示要一致
                                       bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
                                                        
                                                          })
                                       }
                                       })
        
        </script>
    </body>
</html>

注意：1.函数要写在//todo那边

2. connectWebViewJavascriptBridge(callback)/ connectWebViewJavascriptBridge(function(bridge)别忘了

ios端

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSURL* url = [NSURL fileURLWithPath:path];
    NSURLRequest* request = [NSURLRequest requestWithURL:url] ;
    [self.webView loadRequest:request];
    // 在这边会收到js端send过来的数据
    _bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"ObjC received message from JS: %@", data);
        responseCallback(@"Response for message from ObjC");
    }];
    // 在这边会收到 js端 callHandler传过来的数据
    [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback called: %@", data);
        responseCallback(@"Response from testObjcCallback");
    }];

    
//    [_bridge send:@"A string sent from ObjC before Webview has loaded." responseCallback:^(id responseData) {
//        NSLog(@"objc got response! %@", responseData);
//    }];

}

- (IBAction)sendMessage:(id)sender {
    // 直接send  js端的 bridge.init(function(message, responseCallback)会收到信息
    [_bridge send:@"A string sent from ObjC to JS" responseCallback:^(id response) {
        NSLog(@"sendMessage got response: %@", response);
    }];
}

- (IBAction)callHandler:(id)sender {
     // 用handler的js端的   bridge.registerHandler('testJavascriptHandler', function(data, responseCallback)会收到
    id data = @{ @"greetingFromObjC": @"Hi there, JS!" };
    // 标示是testJavascriptHandler js端要保持一致
    [_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
        NSLog(@"testJavascriptHandler responded: %@", response);
    }];

注意用handler的时候标记要一样