一、背景

最近接触公司项目,需要和原生app做交互,由此业务需求,开始了学习探索之路。

二、解决方案之WebViewJavascriptBridge

想要和app交互,必须在app上先把bridge进行实例化,这是先决条件。

oc解决方案

步骤

1、引入文件

#import "WebViewJavascriptBridge.h"
@property WebViewJavascriptBridge* bridge;

2、实例化WebViewJavascriptBridge

self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

3、在oc中注册一个函数,并调用一个js处理函数

[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC Echo called with: %@", data);
responseCallback(data);
}];
[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {
NSLog(@"ObjC received response: %@", responseData);
}];

4、把这段js代码放入前端js或者页面中

 function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
// 创建iframe 对象, 在网页中,iframe的用法非常多,主要应用于伪ajax、嵌套页面、页面重用。
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
//保证前面的代码执行完再删除这个iframe节点,
//setTimeout (fn,0)
//同步代码转异步代码,这是为了手动调配优先级不高的代码靠后执行。保证当前处于事件队列中的任务全部执行完后该任务(函数)立刻得到执行。
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

5、在前端调用

setupWebViewJavascriptBridge(function(bridge) {

    /* Initialize your app here */

    bridge.registerHandler('JS Echo', function(data, responseCallback) {
console.log("JS Echo called with:", data)
responseCallback(data)
})
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
})

API

oc调用js

// OC端 向 JS端 传数据的回调函数, 注册 registerHandler(标识符, 数据回调闭包), 当OC端发起数据传送,会调用 function(数据, OC端给的回调函数) --------->handlerName要和OC端保持一致
bridge.registerHandler("handlerName", function(responseData) { ... })

js调用oc

bridge.callHandler("handlerName", data)
// JS端 向 OC端 传数据的方式,callHandler(方法标识符, 数据, 回调) ---------->testObjcCallback要和OC端保持一致
bridge.callHandler("handlerName", data, function responseCallback(responseData) { ... }) bridge.disableJavscriptAlertBoxSafetyTimeout()

总结

交互前需要先对OC环境和JS环境进行初始化,JS环境的初始化通过Web页面加载时发送特定的URL来完成。

WebViewJavascriptBridge在OC端和JS端各自维护一个bridge对象来保存开放给另一端的方法,以及自身调用另一端后的回调方法。前者通过handlerName来映射,后者通过callBackId标识唯一性。方法调用时必定携带handlerName,若需要回调,还需携带callBackId。

WebViewJavascriptBridge中OC调用JS采用的是WebView提供的JS执行方法;而JS调用OC采用的是URL拦截的方式,OC端通过识别特定的URL来区分是否需要拦截,并做相应的逻辑处理。

android解决方案

安卓版插件传送门https://github.com/gzsll/WebViewJavascriptBridge,原理基本一致,没有深入研究。

思考

WebViewJavascriptBridge还需要做IOS和Android的兼容,那么,还有没有更好的方案呢?功夫不负有心人,我找到了DSBridge

三、解决方案之DSBridge

dsbridge最大的特点就是支持同步!中文文档传送门:https://github.com/wendux/DSBridge-Android/blob/master/readme-chs.md

文章写的比较浅,如有纰漏,欢迎指正,如果有更好方案,欢迎留言。

 

js和native交互方法浅析的更多相关文章

  1. js与native交互

    js与native交互 UIWebView Native调用JS,使用stringByEvaluatingJavaScriptFromString来解释执行js脚本. //script即为要执行的js ...

  2. iOS: JS和Native交互的两种方法

    背景: UIWebView: iOS 用来展示 web 端内容的控件. 1. 核心方法: - (NSString*)stringByEvaluatingJavaScriptFromString:(NS ...

  3. html与ios交互方法 WebViewJavascriptBridge

    WebViewJavascriptBridge 1.html调用ios的方法 <!DOCTYPE html> <html lang="en"> <he ...

  4. CEF3开发者系列之JS与C++交互之一

    JS与Native交互是相对于比较困难的技术,在学习这门技术之前,我们先了解下浏览器内核中的JS引擎与chromium内核的V8引擎相关知识.在浏览器应用中,JS与本地代码互相调用,得益于浏览器内核对 ...

  5. Android 和 JS交互方法初探

    起初有个需求,就是需要监听网页的图片点击,然后图片单独跳转到另一个页面单独显示 这里就需要用JS和Android Native方法之间的通信 先说上面的解决办法之前先引出两个Android的方法 1: ...

  6. iOS JS 和 OC交互 / JS 和 native 相互调用

    现在app 上越来越多需求是通过UIWebView 来展示html 或者 html5的内容, js 和 native OC代码交互 就非常常见了. js 调用 native  OC代码 第一种机制 ( ...

  7. 【转】第6篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+自动反射方法分析

    作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  8. 【转】第5篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  9. js与native的交互

    WebView与Javascript交互(Android): WebView与Javascript交互是双向的数据传递,1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数,具 ...

随机推荐

  1. python文件操作及os模块常用命令

    1.文件打开 文件句柄 = open('文件路径', '模式') 2.文件操作 打开文件时,需要指定文件路径和以何等方式打开文件,打开后,即可获取该文件句柄,日后通过此文件句柄对该文件操作. 三种基本 ...

  2. js 数组的常用方法归纳

    数组的常用方法归纳 slice(start,end) 传参:start代表从哪里开始截取,end代表截取结束的地方 var a = [1,2,3]a.slice(1);//[2,3] pop() 可以 ...

  3. 利用MJModel解决关键字

    #import "CJAddressModel.h" @implementation CJAddressModel +(NSDictionary *)mj_replacedKeyF ...

  4. 【CSS3】定位

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Structural Inference of Hierarchies in Networks(网络层次结构推断)

    Structural Inference of Hierarchies in Networks(网络层次结构推断) 1. 问题 层次结构是一种重要的复杂网络性质.这篇文章给出了层次结构的精确定义,给出 ...

  6. ArcGIS API for JavaScript 4.2学习笔记[18] 搜索小部件

    这个例子很简单,作为开学后(暴露出学生党的本质)的开胃菜是再合适不过了. 不过,博主提前警告一下:接下来的例子会相当的长.烦.难.我还会用"引用"-"函数参数骨架&quo ...

  7. 自定义tab吸顶效果一(原理)

    PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...

  8. 从一个word文件中读取所有的表格和标题(1)

    首先讲需求: 从word文件中读表格里的数据,然后插入数据库中.word文件中的表格是带有标题的,把标题读出来,进行匹配数据库. 需求分析: word2007底层是以xml文件存储的,所以分析xml的 ...

  9. jamup与gb2i组合

    软件一定要开嗓单效果器,最好不要关闭中断软件/声音,每次有重新检测电流必须会有嗓音,最好用ipad ,不然会烦死人.默认delay太长,在DLY面板修改 gb2i 效果还行,他的价值重在使用,让新人使 ...

  10. vim编辑器的使用技巧

    vim(vi)是上Linux非常常用的编辑器,很多Linux发行版都默认安装了vi(vim).vi(vim)命令繁多但是如果使用灵活之后将会大大提高效率.vi是“visual interface”的缩 ...