WebViewJavascriptBridge源码探究--看OC和JS交互过程

最新推荐文章于 2021-06-17 11:41:19 发布

bravegogo

最新推荐文章于 2021-06-17 11:41:19 发布

阅读量1k

点赞数

分类专栏： UIWebview ios开发 UI

ios开发同时被 3 个专栏收录

99 篇文章 0 订阅

订阅专栏

56 篇文章 0 订阅

订阅专栏

UIWebview

9 篇文章 0 订阅

订阅专栏

今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下，oc调用js方法我们是知道的，系统提供了stringByEvaluatingJavaScriptFromString函数

。现在主要是了解js是如何调用oc方法的，分享下探究过程。

　　源码不多，就一个头文件WebViewJavascriptBridge.h和实现文件WebViewJavascriptBridge.m, 和一个js文件，实现在js那边可以调用oc方法，也可以在oc里面调用js方法。

先上图，实现简单的oc和js互相调用的demo, 另外附加一个模拟项目中用到的oc和js互相调用场景：

一、然后说说js调用oc方法的原理，它们是如何实现的？库文件三个

我们跟踪下oc控制器加载UIWebView的过程和js调用oc方法过程

1、程序启动，在自定义控制器里，创建一个WebViewJavascriptBridge对象时，会加载WebViewJavascriptBridge.js.txt文件，里面是初始js代码

在这个js里面，创建了一个WebViewJavascriptBridge脚本对象，另外创建一个隐藏的iframe标签：每次js调用oc方法，都是修改iframe标签的src来触发UIWebView的代理监听方法

 
   
 View Code 

2、UIWebView加载我们自定义的html页面TestJSBridge.html，里面有脚本注册js调用oc方法标识，和oc调用js标识

 
    
  
<html>
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
            html { font-family:Helvetica; color:#222; background:#D5FFFD; border: 5px dashed blue;}
            .rowH3{margin: 0px; text-align: center;}
            .jsBtn{font-size: 18px;}
        </style>
    </head>
    <body>
        <h3 class="rowH3">测试OC和JS互相调用</h3>
        <button class="jsBtn" id="jsBtn">JS调用OC方法</button>
        <div id="logDiv"><!-- 打印日志 --></div>
    </body>
</html>
<script type="text/javascript">
    window.onerror = function(err) {
        printLog(err);
    }
    
    function connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge);
        } else {
            document.addEventListener('WebViewJavascriptBridgeReady', function() {
                callback(WebViewJavascriptBridge);
            }, false);
        }
    }
    
    var uniqueId = 1;
    //日志打印方法
    function printLog(data) {
        var logObj = document.getElementById('logDiv');
        var el = document.createElement('div');
        el.className = 'logLine';
        el.innerHTML = uniqueId++ + ': ' + JSON.stringify(data); //json转字符串
        if (logObj.children.length) { logObj.insertBefore(el, logObj.children[0]) }
        else { logObj.appendChild(el) }
    }
    
    //初始化调用函数connectWebViewJavascriptBridge
    connectWebViewJavascriptBridge(function(bridge) {
        
        bridge.init(function(message, responseCallback) {});  
                                   
        //注册js响应方法，响应OC调用，标识objc_Call_JS_Func
        bridge.registerHandler('objc_Call_JS_Func', function(data, responseCallback) {
            printLog(data);  //打印oc传过来的参数
        });

        //给标签按钮设置点击事件
        var callbackButton = document.getElementById('jsBtn');
        callbackButton.onclick = function(e) {
            e.preventDefault();
            //注册标识js_Call_Objc_Func，便于js给IOS发送消息
            bridge.callHandler('js_Call_Objc_Func', {id: 1, info: 'hello, iOS, 我从js那边过来！'},  function(response) { });
        }
    });
    
</script> 
    
  

3、点击html标签按钮，触发js事件

 
         //给标签按钮设置点击事件 
        
         var  
         callbackButton = document.getElementById( 
         'jsBtn' 
         ); 
        
         callbackButton.onclick =  
         function 
         (e) { 
        
         e.preventDefault(); 
        
         //注册标识js_Call_Objc_Func，便于js给IOS发送消息 
        
         bridge.callHandler( 
         'js_Call_Objc_Func' 
         , {id: 1, info:  
         'hello, iOS, 我从js那边过来！' 
         },   
         function 
         (response) { }); 
        
         }

　我们跟踪bridge.callHandler方法，进入WebViewJavascriptBridge.js

　　var CUSTOM_PROTOCOL_SCHEME = 'wvjbscheme'

　　var QUEUE_HAS_MESSAGE = '__WVJB_QUEUE_MESSAGE__'

messagingIframe是个iframe标签，点击我们自定义html按钮标签，触发js事件，最后进入callHandler --> _doSend ,

当messagingIframe标签src重新赋值时，会触发UIWebView的代理方法（src的值一直是：wvjbscheme://__WVJB_QUEUE_MESSAGE__ ，也可自定义，这个在进入oc UIWebView代理方法时会用来作为判断标识）。

跟踪后面执行的过程：

至此，js调用oc成功

总结js调用oc过程：

--> 触发js事件

--> 把要传入参数和自定义注册标识“js_Call_Objc_Func”存入js数组sendMessageQueue

--> 重新赋值iframe标签的src属性，触发UIWebView代理方法, 根据src的值进入相应处理方法中

--> 在oc方法里面调用js方法_fetchQueue，获取js数组里面所有的参数

--> 根据传入的自定义注册标识 js_Call_Objc_Func 从oc字典_messageHandlers找出匹配block，最后执行block，里面有我们自定义处理的后续代码

二、oc调用js过程

从oc内部发起

-- > 调用bridge的callHandler方法，传入需要的参数和自定义注册标识

--> 最后使用UIWebView系统方法stringByEvaluatingJavaScriptFromString调用js脚本WebViewJavascriptBridge._handleMessageFromObjC 完成参数的传递

--------------------------------------------- end --------------------------------------

DEMO下载

github地址：https://github.com/xiaotanit/Tan_WebViewJavaScriptBridge

另外记录一个UIWebView不能加载带中文参数的url问题：

假设加载url为：http://baidu.com/?search=博客园

这样UIWebView加载这个带中文参数的url，是不能显示的，需要把中文进行转义，才能显示。

使用字符串方法stringByAddingPercentEncodingWithAllowedCharacters对中文进行转义

NSString *str = @"http://baidu.com/?search=博客园";
  //  str = [str stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
  str = [str stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet characterSetWithCharactersInString:@"`#%^{}\"[]|\\<> "].invertedSet];
    
 NSURL *url = [NSURL URLWithString:str];

NSURLRequest *request = [NSURLRequest requestWithURL:url];

原文链接：http://www.cnblogs.com/tandaxia/p/5699886.html

bravegogo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebViewJavascriptBridge源码探究--看OC和JS交互过程

今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下，oc调用js方法我们是知道的，系统提供了stringByEvaluatingJavaScriptFromString函数。现在主要是了解js是如何调用oc方法的，分享下探究过程。　　源码不多，就一个头文件WebViewJavascriptBridge.h和实现文件WebViewJa
复制链接

扫一扫