WebViewJavascriptBridge解析和改造

最新推荐文章于 2023-08-17 14:14:52 发布
最新推荐文章于 2023-08-17 14:14:52 发布
阅读量527 收藏 1
点赞数
文章标签： ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38201792/article/details/132188198
版权

WebViewJavascriptBridge框架可以同时支持UIWebView及WKWebView，完成native与web的交互。其主要核心思路是native在webView的代理中拦截url，根据url来做不同处理！
WebViewJavascriptBridge框架结构主要结构为：
WebViewJavascriptBridge、WKWebViewJavascriptBridge这两个类分别为UIWebView与WKWebView与web交互桥梁，native与web的交互工作主要通过这两个类处理
WebViewJavasciptBridge_JS该类是web的JS环境，客户端需要在网页初始化的时候注入到web端，只有一个返回值为NSString的方法

一、WebViewJavascriptBridgeBase

该类有两个重要的属性：

1、NSMutableDictionary *responseCallbacks–存储内容有

callbackId为key，objc_cb_(uniqueId)为值，其中_uniqueId会递增
objc_cb(_uniqueId)为key，回调方法为值
handlerName为key，参入的该参数为值

2、messageHandlers—存储客户端注册方法的方法及实现

二、web调用native的实现

1、native本地注册方法

[self.jsBridge registerHandler:@"JSCallOC" handler: ^(id data, WVJBResponseCallback responseCallback) {
   responseCallback(@"hahaha");
   NSLog(@"data:%@----responseCallback:%@", data, responseCallback);
}];

该注册方法内部实现主要是将注册方法名和方法实现存储到messageHandlers中

- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler {
   _base.messageHandlers[handlerName] = [handlercopy];
}

2、web端通过点击调用

WebViewJavascriptBridge.callHandler('JSCallOC', {'lmf':'cool'}, function(response) {
   alert(response);
})

上面方法中的WebViewJavascriptBridge为注入的js环境提供的，callHandler方法也是用环境中的代码实现的，这个js环境是在加载网页时，注入的。

3、Native消息处理

native通过webView:decidePolicyForNavigationAction:decisionHandler:拦截消息https://wvjb_queue_message，进而执行WKFlushMessageQueue

- (void)WKFlushMessageQueue {
    [_webView evaluateJavaScript:[_base webViewJavascriptFetchQueyCommand] completionHandler:^(NSString* result, NSError* error) {
        if (error != nil) {
            NSLog(@"WebViewJavascriptBridge: WARNING: Error when trying to fetch data from WKWebView: %@", error);
        }
        [_base flushMessageQueue:result];
    }];
}

webViewJavascriptFetchQueryCommand的实现如下

- (NSString*)webViewJavascriptFetchQueyCommand {

   return@"WebViewJavascriptBridge._fetchQueue();";
}

即WKFlushMessageQueue方法会执行web端的_fetchQueue
function _fetchQueue() {

var messageQueueString = JSON.stringify(sendMessageQueue);
sendMessageQueue = [];
return messageQueueString;
}
result数据内容为：

[
    {
      “handlerName”:”JSCallOC”,
      ”data”:{“lmf”:”cool”},
      ”callbackId”:”cb_1_15709533997161"
    }
]

再通过执行[_base flushMessageQueue:result];

- (void)flushMessageQueue:(NSString *)messageQueueString{
    if (messageQueueString == nil || messageQueueString.length == 0) {
        NSLog(@"WebViewJavascriptBridge: WARNING: ObjC got nil while fetching the message queue JSON from webview. This can happen if the WebViewJavascriptBridge JS is not currently present in the webview, e.g if the webview just loaded a new page.");
        return;
    }

    id messages = [self _deserializeMessageJSON:messageQueueString];
    for (WVJBMessage* message in messages) {
        if (![message isKindOfClass:[WVJBMessage class]]) {
            NSLog(@"WebViewJavascriptBridge: WARNING: Invalid %@ received: %@", [message class], message);
            continue;
        }
        [self _log:@"RCVD" json:message];
        
        NSString* responseId = message[@"responseId"];
        if (responseId) {
            WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
            responseCallback(message[@"responseData"]);
            [self.responseCallbacks removeObjectForKey:responseId];
        } else {
            WVJBResponseCallback responseCallback = NULL;
            NSString* callbackId = message[@"callbackId"];
            if (callbackId) {
                responseCallback = ^(id responseData) {
                    if (responseData == nil) {
                        responseData = [NSNull null];
                    }
                    
                    WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
                    [self _queueMessage:msg];
                };
            } else {
                responseCallback = ^(id ignoreResponseData) {
                    // Do nothing
                };
            }
            
            WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];
            
            if (!handler) {
                NSLog(@"WVJBNoHandlerException, No handler for message from JS: %@", message);
                continue;
            }
            
            handler(message[@"data"], responseCallback);
        }
    }
}

存在callbackId，生成responseCallback

//responseCallback
^(id responseData) {
 if (responseData == nil) {
 responseData = [NSNull null];
 }                   
 WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
 [self _queueMessage:msg];
};

messageHandlers通过message[@“handlerName”]获取native注册的方法handler，并执行handler(message[@“data”], responseCallback);

4、执行注册的方法

执行注册的方法，并调用responseCallback传入参数hahaha，得到msg-@{ @“responseId”😡“cb_1_1587911907256”, @“responseData”😡“hahaha” }再执行_queueMessage

- (void)_queueMessage:(WVJBMessage*)message {
    if (self.startupMessageQueue) {
        [self.startupMessageQueue addObject:message];
    } else {
        [self _dispatchMessage:message];
    }
}
//执行js回调
- (void)_dispatchMessage:(WVJBMessage*)message {
    NSString *messageJSON = [self _serializeMessage:message pretty:NO];
    [self _log:@"SEND" json:messageJSON];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\'" withString:@"\\\'"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
    
    NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
    if ([[NSThread currentThread] isMainThread]) {
        [self _evaluateJavascript:javascriptCommand];

    } else {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [self _evaluateJavascript:javascriptCommand];
        });
    }
}

该方法会执行web端的WebViewJavascriptBridge._handleMessageFromObjC(message.string);

5、执行js端的_handleMessageFromObjC

function _handleMessageFromObjC(messageJSON) {
 _dispatchMessageFromObjC(messageJSON);
}
function _dispatchMessageFromObjC(messageJSON) {
    if (dispatchMessagesWithTimeoutSafety) {
        setTimeout(_doDispatchMessageFromObjC);
    } else {
         _doDispatchMessageFromObjC();
    }
    
    function _doDispatchMessageFromObjC() {
        var message = JSON.parse(messageJSON);
        var messageHandler;
        var responseCallback;

        if (message.responseId) {
            responseCallback = responseCallbacks[message.responseId];
            if (!responseCallback) {
                return;
            }
            responseCallback(message.responseData);
            delete responseCallbacks[message.responseId];
        } else {
            if (message.callbackId) {
                var callbackResponseId = message.callbackId;
                responseCallback = function(responseData) {
                    _doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
                };
            }
            
            var handler = messageHandlers[message.handlerName];
            if (!handler) {
                console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
            } else {
                handler(message.data, responseCallback);
            }
        }
    }
}

判断存在responseId，通过responseId从responseCallbacks获取回调，并传入responseData执行回调，再从responseCallbacks中删除responseId的数据。

三、技术改造

在Native消息处理的位置我们能发现，js调用的方法我们都是能接收的，问题是在本地的映射表中做了校验，只有我们注册过的方法才能接收到信息。
根据这里的信息，我们就可以打断这种注册校验的关系了，外面也不用再注册，可以通过改造统一把接收到的数据传递到外面。

一、自己封装WebViewJavascriptBridge模块

1、仓库构建

因为我们需要直接改造WebViewJavascriptBridgeBase内的信息，所以直接使用github上的仓库就不适用了。
在这里插入图片描述
这里我们创建HUWebViewJavascriptBridge仓库，把WebViewJavascriptBridge里面的信息拉出来，集成到我们的仓库中就创建了一个我们自己的仓库，接下来就可以改造了。

2、技术改造

1、添加对外API

在这里插入图片描述

2、信息回调
1、创建内部代理回调

在这里插入图片描述

2、在消息处理位置添加代理调用

在这里插入图片描述

3、对外传递

在这里插入图片描述
这里我们就可以通过对外的API，做统一处理了，这里能看到，WebViewJavascriptBridge本身的能力我们并没有修改，保留了原有的注册和映射的方式。这里我们的组件就封装完成了。

二、调用

这里我们如果统一的API回调之后，就不再需要注册了。

1、改造前

 bridge.registerHandler("hello") { data, responseCallback in
      // do
  }

2、改造后

// 统一回调
        /// - Parameter type: 注册key
        /// - Parameter data: 传递参数
        /// - Parameter responseCallback: 回调函数
        bridge.jsCallBack = { type, data, responseCallback in
            guard let type = type, let responseCallback = responseCallback else { return }
            switch type {
            case "hello":
                toast("hello\(String(describing: data))")
                responseCallback("")
            default:
                toast("未实现")
                responseCallback("")
            }
        }
家里两头小猪猪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
关于WebViewJavascriptBridge消息互通三方库的js封装（干货）
cmyh100的博客
04-13 1671
废话不多说，直接上代码注册与app的桥接// 注册事件监听 function connectWebViewJavascriptBridge (callback) { if (window.WebViewJavascriptBridge) { callback(window.WebViewJavascriptBridge) } else { ...
WKWebview与JSBridge日常使用记录
02-21 1239
最近项目中因为涉及到WKWebview与JSBridge的交互有点多，目前采用的方案把已知问题都解决了。怕自己遗忘，所以记录下来，也供大家参考。 前情提要 应用是新闻类App，内部视图较为复杂且嵌入多方广告套件，多方考量之下，采取原生嵌套H5来实现，顶部nav部分由原生来做(类似于今日头条的顶部导航栏和频道栏)，中间内容部分由H5来做，大方向定下来之后，最主要涉及的就是原生和H5的交互问题，JSB...
腾讯x5webview和JS交互的三方库-Android开发
05-26
X5Bridge X5Bridge Android本机和JavaScript之间的桥梁的库Google本机具有一组通信，实际上，它也可以完成回调交互i X5Bridge X5Bridge Android本机和JavaScript之间的桥梁的库一组通信，实际上，它也可以完成回调交互，主要是通过接口注释。 但是JavaScript需要定义全局方法用法JitPack.io存储库{// ... maven {url“ https://jitpack.io”}}依赖项{实现'com.github.zorozhao：X5Bridge：0.1'}使用它在Java中添加com.x5bridg
JSBridge的原理及使用
最新发布
wang_gwei的博客
08-17 5171
JSBridge的原理及使用
Android WebView JSBridge 的 Hybrid
Beluga_白鲸
03-25 1441
前言 Hybrid App，即混合开发,也就是半原生半Web的开发模式,有跨平台运行效果； JSBridge是H5与Native通信的桥梁； Git库 Android：JsBridge iOS：WebViewJavascriptBridge JsBridge解析 WebView相关的两个重要的类：WebViewClient和WebChromeClient。 WebViewClien...
iOS开发 WKWebView使用第三方库WebViewJavascriptBridge 以及js端处理
热门推荐
开发仔XG
11-05 1万+
最近项目换了WKWebView，怎么和Java共用一套js端代码，和同事研究了一下，最后搞定。 WebViewJavascriptBridge地址：https://github.com/marcuswestin/WebViewJavascriptBridge iOS端代码：参考链接：http://www.jianshu.com/p/e951af9e5e74
WebViewJavascriptBridge－demo
12-30
WebViewJavascriptBridge是一个在iOS和Android平台上用于在原生应用（Native App）与内嵌的WebView之间进行双向通信的开源库。这个库通过提供一个简单易用的API，使得JavaScript能够与Objective-C或Java代码进行无缝...
WebViewJavascriptBridge详细使用
04-05
本篇讲讲WebViewJavascriptBridge的基本原理及详细讲讲如何去使用，包括iOS端的使用和JS端的使用。 经过多番百度、Google，发现WebViewJavascriptBridge的资源讲解不是翻译官方文档就是直接说官方提供的demo。但是...
WebViewJavascriptBridge
05-03
WebViewJavascriptBridge是一款在移动应用开发中广泛使用的框架，它允许Android和iOS的原生代码与JavaScript之间进行双向通信。在混合开发模式下，这个工具显得尤为重要，因为它可以帮助开发者轻松地在Web视图...
WebViewJavascriptBridge:适用于Android的WebViewJavascriptBridge
04-13
WebViewJavascriptBridgeWebViewJavascriptBridge for Android 是 WebViewJavascriptBridge for iOS/OSX的Android 实现, 项目里的WebViewJavascriptBridge.js.txt, 及测试网页ExampleApp.html 直接来自 ...
WebViewJavascriptBridge框架
05-03
介绍js与java的交互框架WebViewJavascriptBridge，实现android与h5的混合式开发
WebViewJavascriptBridge浅析
weixin_34153893的博客
12-29 127
WebViewJavascriptBridge是一个Objective-C与JavaScript进行消息互通的三方库。通过WebViewJavascriptBridge，我们可以很方便的实现OC和Javascript互调的功能。WebViewJavascriptBridge实现互调的过程也容易理解，就是在OC环境和Javascript环境各自保存一个相互调用的bridge对象，每一个调用之间都有i...
WebviewJavascriptBridge实现原理
Kslient的博客
12-16 2050
一、什么是 JSBridge？ JSBridge 是一种 webview 侧和 native 侧进行通信的手段，webview 可以通过 jsb 调用 native 的能力，native 也可以通过 jsb 在 webview 上执行一些逻辑。 二、JSB 的实现方式 在比较流行的 JSBridge 中，主要是通过拦截 URL 请求来达到 native 端和 webview 端相互通信的效果的。 这里我们以比较火的 WebviewJavascriptBridge 为例，来解析一下它的实现方式。 源码地址：h
WebViewJavascriptBridge详细使用（转载）
dhp30329的博客
01-05 205
WebViewJavascriptBridge是支持到iOS6之前的版本的，用于支持native的iOS与javascript交互。如果需要支持到iOS6之前的app，使用它是很不错的。本篇讲讲WebViewJavascriptBridge的基本原理及详细讲讲如何去使用，包括iOS端的使用和JS端的使用。 经过多番百度、Google，发现WebViewJavascriptB...
BridgeWebview原理简略分析
u013914309的博客
07-27 696
整体理解： 1.Java端和JS端各自维护着两个Map和一个消息队列。     一个Map维护着 提供给对方调用的方法，键值对；在registerHandler时添加。     一个Map维护着 对方调用自己时提供的回调方法，键值对; 在执行callhandler时，创建相应的Id, 并与CallbackFuction相关联存入HashMap。(在直接调用时，该ID被
WebViewJavascriptBridge的简单封装
qq_27942511的博客
05-03 631
前言上篇介绍了WebViewJavascriptBridge框架的使用，本片文章会对这一框架进行封装，使用起来更加的简单明了。具体介绍 项目结构图： 对于框架这里就不多介绍了，主要说一下改动的地方，如果对原来的WebViewJavascriptBridge框架有什么不了解的可以查看http://blog.csdn.net/qq_27942511/article/details/70923176JS→
iOS下JS与OC互相调用（六）--WKWebView + WebViewJavascriptBridge
weixin_30342827的博客
08-29 469
上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用，这一篇来介绍一下WKWebView 又是如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用的。WKWebView 下使用WebViewJavascriptBridge与UIWebView 大同小异。主要是示例化的类不一样...
webview学习笔记以及JSBridge
lintcgirl的博客
09-06 1511
WebView是用来显示网页的控件，使用WebKit渲染引擎加载显示网页。 使用WebView需要申请android.permission.INTERNET 权限。 加载网页只需要调用：loadUrl或者loadData函数即可。 如果你只是简单的打开一个webView显示网页内容，不需要记录数据交互等等，可以不用在app中写WebView，使用以下代码打开浏览器显示：Intent in
webviewjavascriptbridge
03-16
WebViewJavascriptBridge是一个用于iOS和Android平台的JavaScript桥接库，它可以让JavaScript代码和原生代码之间进行相互调用和传递数据。通过WebViewJavascriptBridge，开发者可以在Web页面中调用原生的API，也可以在原生应用中调用Web页面中的JavaScript函数。这个库可以大大简化Web和原生应用之间的交互，提高开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值