[js&oc交互]WebViewJavascriptBridge简单实用

最新推荐文章于 2024-06-27 14:04:05 发布

iOSTianNan

最新推荐文章于 2024-06-27 14:04:05 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/iOSTianNan/article/details/51423132

版权

iOS JS交互 WebVIew 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

WebViewJavascriptBridge实用流程

Git: [https://github.com/tianNanYiHao/WebViewJavascriptBridge.git]
其实WebVIewJavaScriptBridge的使用方法网络上都有,最好还是直接看Git官方给出的流程,这里我把我自己简化的,和理解的写出来,方便自己以后快速查看!
简单列一下WebVIewJavascriptBridge的步骤
1:导入头文件

#import "WebViewJavascriptBridge.h"

@property WebViewJavascriptBridge* bridge;

2:实例化这个_bridge

//开启调试信息
    [WebViewJavascriptBridge enableLogging];

//关联webView
    _bridge = [WebViewJavascriptBridge bridgeForWebView:_webview];

3:(1)在oc中注册 & (2)在js中处理回调
1==>:

  //点击js事件 js向oc通信(触发oc事件)
    [_bridge registerHandler:@"registerHandler" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"datattatatatat=== %@",[NSString stringWithFormat:@"%@",data]);

        UIAlertView *aler = [[UIAlertView alloc]initWithTitle:nil message:@"js调用oc的按钮提示" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:nil];
        aler.tag = 100;

        [aler show];

    }];

2==>

 id data = @{@"信息来源:":@"点击oc事件��,oc向js发送信息并得到js反馈"};
    [_bridge callHandler:@"callHandler" data:data responseCallback:^(id responseData) {
        NSLog(@"   =========  %@",responseData);
        self.lab.text = [NSString stringWithFormat:@"btn2 获得js反馈 %@",responseData];
    }];

4:在js部分做相应的必要处理,具体看下面
主要在js里面复制这样一段代码以供js去执行

   //必要设置1
            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)
            }

然后,在js的这段代码中,添加上你的js处理

   //必要设置2
        setupWebViewJavascriptBridge(function(bridge) {
        //里面贴上js的处理代码(js的按钮 js的反馈等等)
}

js部分的代码(全部复制粘贴即可)


<html>
    <body>
        <h2>我的WebVIewJavascriptBridge使用</h2>
        <p>点击下面的按钮,将由js触发oc事件</p>

        <script>

            //必要设置1
            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)
            }

        //必要设置2
        setupWebViewJavascriptBridge(function(bridge) {

                 //2.1 js回调 (oc向js发送消息后 , js返回信息)
                 bridge.registerHandler('callHandler', function(data, responseCallback) {

                var responseData = { 'Javascript Says':'I am Js, CallBack Now!!!!!' }
                responseCallback(responseData,data)

                })


                 //2.2 js按钮 (js原生按钮,点击后触发oc事件)
                 var callbackButton = document.getElementById('Myjsbuttons').appendChild(document.createElement('button'))
                 callbackButton.innerHTML = 'js按钮==>点击即可调用oc方法'
                 callbackButton.onclick = function(e) {
                 e.preventDefault()
                 bridge.callHandler('registerHandler', {'信息来源:': '我是js,我调用了oc方法(弹出一个UIAlert)'}, function(response) {
                                    })
                 }



                var callbackButton = document.getElementById('MyjsButtons2').appendChild(document.createElement('button'))
                 callbackButton.innerHTML = 'js按钮2 ==>点击即可调用oc方法'
                 callbackButton.onclick = function(){
                 bridge.callHandler('registerHandler2',{'信息来源:':'我是js,我调用了oc方法(修改lab的文字)'},function(response){
                                    })
                 }


            })

        </script>

         <div id='Myjsbuttons'></div>

         <div id='MyjsButtons2'></div>

    </body>
</html>

效果演示

先来看看js 和 oc 的交互效果,部分效果需要在控制台查看,这里就不贴出来了

1.点击oc原生按钮 oc调用js 获得js的回调(反馈信息)

这里写图片描述

2.点击js原生按钮 js调用oc空间,修改oc空间属性

这里写图片描述

完整代码

Git传送门=====>>>

iOSTianNan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[js&oc交互]WebViewJavascriptBridge简单实用

WebViewJavascriptBridge实用流程Git: [https://github.com/tianNanYiHao/WebViewJavascriptBridge.git] 其实WebVIewJavaScriptBridge的使用方法网络上都有,最好还是直接看Git官方给出的流程,这里我把我自己简化的,和理解的写出来,方便自己以后快速查看! 简单列一下WebVIewJavascri
复制链接

扫一扫

专栏目录