UIWebView中JS与OC交互 WebViewJavascriptBridge的使用
一、综述
现在很多的应用都会在多种平台上发布,所以很多程序猿们都开始使用Hybrid App的设计模式。就是在app上嵌入网页,只要写一份网页代码,就可以跑在不同的系统上。在iOS中,app多是通过WebView来加载网页,由于功能需求等原因,代码中少不得要和跟网页交互。
二、原理
在iOS中,本地调用Javascript语言,是通过UIWebView中的实例方法stringByEvaluatingJavaScriptFromString:来实现的,该方法通过字符串对象的形式传入JS代码。
1
|
[webView stringByEvaluatingJavaScriptFromString:@ "Math.random();" ];
|
而JS调用本地的代码,则并没有现成的API,而是需要间接地通过一些方法来实现。我们利用UIWebView的代理方法,当UIWebView发起的所有网络请求,都可以通过delegate函数在Native层得到通知。这样,我们就可以在UIWebView内发起一个自定义的网络请求,比如:'wvjbscheme://__BRIDGE_LOADED__'。于是在UIWebView的delegate函数中,我们拦截url,只要发现是我们自定义的url,就不进行内容的加载,转而执行相应的调用逻辑。
三、WebViewJavascriptBridge的使用
1、WebViewJavascriptBridge简介
WebViewJavascriptBridge支持到iOS6之前的版本的,用于支持native的iOS与javascript交互,接下来讲讲WebViewJavascriptBridge的基本原理及应该如何去使用,包括iOS端的使用和JS端的使用。
首先,看看WebViewJavascriptBridge.m中Webview代理拦截的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
- ( void )webView:(WebView *)webView decidePolicyForNavigationAction:( NSDictionary *)actionInformation request:( NSURLRequest *)request frame:(WebFrame *)frame decisionListener:( id <WebPolicyDecisionListener>)listener
{
if (webView != _webView) { return ; }
NSURL *url = [request URL];
if ([_base isCorrectProcotocolScheme:url]) {
if ([_base isBridgeLoadedURL:url]) {
[_base injectJavascriptFile];
} else if ([_base isQueueMessageURL:url]) {
NSString *messageQueueString = [ self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
[_base flushMessageQueue:messageQueueString];
} else {
[_base logUnkownMessage:url];
}
[listener ignore];
} else if (_webViewDelegate && [_webViewDelegate respondsToSelector: @selector (webView:decidePolicyForNavigationAction:request:frame:decisionListener:)]) {
[_webViewDelegate webView:webView decidePolicyForNavigationAction:actionInformation request:request frame:frame decisionListener:listener];
} else {
[listener use];
}
}
|
WebViewJavascriptBridge是通过webview的代理拦截scheme,然后注入相应的JS,在拦截后,通过先通过-isBridgeLoadedURL:方法判断URL是否是需要bridge的URL,若是,则通过injectJavascriptFile方法注入JS;否则判断URL是否是队列消息,若是,则执行查询命令JS并刷新消息队列;如果都不匹配,URL被识别为未知的消息。
2、WebViewJavascriptBridge的使用
首先,要在JS中接入这个框架,这段代码是不变的
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/**
* 此为js接入框架的函数
*/
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)
}
|
然后OC要调用到的JS函数要在下面函数中使用bridge.registerHandler来注册,而且JS需要调用的OC方法也要在下面的函数中用bridge.callHandler调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
/**
* OC调用的JS函数需在此处注册,调用OC方法也需要在此处调用
*/
setupWebViewJavascriptBridge(function(bridge) {
var uniqueId = 1
function log(message, data) {
var log = document.getElementById( 'log' )
var el = document.createElement( 'div' )
el.className = 'logLine'
el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
if (log.children.length) { log.insertBefore(el, log.children[0]) }
else { log.appendChild(el) }
}
//注册一个给OC调用的函数,不带参数
bridge.registerHandler( 'WebViewDidLoad' ,function() {
log( "WebViewDidLoad" )
})
//注册一一个给OC调用的函数,接受OC传来的一个参数和一个回调处理
bridge.registerHandler( 'OC_Call_JS' , function(data, responseCallback) {
log( 'oc调用js -' , data)
var responseData = { 'Javascript response' : 'oc调用JS成功!' }
log( 'js被调用后响应-' , responseData)
responseCallback(responseData)
})
document.body.appendChild(document.createElement( 'br' ))
var callbackButton = document.getElementById( 'buttons' ).appendChild(document.createElement( 'button' ))
callbackButton.innerHTML = 'JS_Call_ObjC'
callbackButton.onclick = function(e) {
e.preventDefault()
log( 'JS call OC' )
//此处调用OC方法
bridge.callHandler( 'JS_Call_ObjC' , { 'foo' : 'bar' }, function(response) {
log( 'JS call OC sucess and get OC rsp' , response)
})
}
})
|
需要注意的是:在setupWebViewJavascriptBridge(function(bridge) {}函数体内的代码不能有错误,不然会导致不任何回调,不打印日志(JS的是脚本语言,跑到错的地方就不跑了)。
OC部分,首先打开框架的日志系统,然后关联webView
1
2
3
|
[WebViewJavascriptBridge enableLogging];
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
|
JS需要调用的OC方法,要在OC代码中注册
1
2
3
4
|
[_bridge registerHandler:@ "JS_Call_ObjC" handler:^( id data, WVJBResponseCallback responseCallback) {
NSLog (@ "JS调用OC: %@" , data);
responseCallback(@ "OC被调用后响应:调用成功!" );
}];
|
而想要调用JS中注册过的函数,在需要的地方用实例方法callHandler调用就可以了
1
2
3
4
|
id data = @{ @ "OC调用JS" : @ "Hi there, JS!" };
[_bridge callHandler:@ "OC_Call_JS" data:data responseCallback:^( id response) {
NSLog (@ "testJavascriptHandler responded: %@" , response);
}];
|
四、小结
最近因为项目需要,正在边学边做Hybrid App,刚好用到这个第三方,就写了篇文分享出来,希望能帮到刚刚入手的人,以上实例的demo地址https://github.com/GarenChen/WebViewJSBridgeDemo喜欢的顺手给个star ^_^;
推荐一些阅读:
JSBridge——Web与Native交互之iOS篇:http://www.jianshu.com/p/9fd80b785de1
Hybrid App 开发模式:http://www.tuicool.com/articles/riE3Yn
WebViewJavascriptBridge:https://github.com/marcuswestin/WebViewJavascriptBridge
UIWebView中JS与OC交互 WebViewJavascriptBridge的使用相关推荐
- UIWebView与JS的深度交互
事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS ...
- iOS JS与OC交互
iOS JS与OC交互 本文内容导航 1.`UIWebView` JS 与 OC 交互 1.1 OC 调用 JS 函数 1.1.1 OC 拼接 JS 字符串调用 JS 方法 1.1.2 使用 JSCo ...
- iOS中JS 与OC的交互(JavaScriptCore.framework)
iOS中实现js与oc的交互,目前网上也有不少流行的开源解决方案: 如:react native 当然一些轻量级的任务使用系统提供的UIWebView 以及JavaScriptCore.framewo ...
- OC WKWebView的JS与OC交互、Cookie管理
完全抄录:iOS中UIWebView与WKWebView.JavaScript与OC交互.Cookie管理看我就够(中) ####WKWebView 是Apple于iOS 8.0推出的WebKit中的 ...
- cef js返回c++的代码_CEF3开发者系列之外篇——IE中JS与C++交互
使用IE内核开发客户端产品,系统和前端页面之间的交互,通常给开发和维护带来很大的便利性.但操作系统和前端之间的交互却是比较复杂的.具体来说就是脚本语言和编译语言的交互.在IE内核中html和css虽然 ...
- iOS原生WebView中JavaScript和OC交互
在iOS开发中很多时候我们会和UIWebView打交道,目前国内的很多应用都采用了UIWebView的混合编程技术,最常见的是微信公众号的内容页面.前段时间在做微信公众平台相关的开发,发现很多应用场景 ...
- JS和OC交互的简单应用
先简单地说一下思路吧 需求:在App中嵌入一个webView,已经有了网址,但是需要去掉这个网页中的一些内容 解决方案:取到webView要加载的网址,对这个网址对应的网页信息进行修改 简单描述: 遵 ...
- IE中JS与C++交互 MFC
本文只是简单交互 ,js调用 c++本地程序没有传参 想多了解请看 文末借鉴网址. CXWebBrowser 文件下载地址: https://download.csdn.net/dow ...
- iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge
WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...
最新文章
- 7月书讯:看风景的人
- JqueryMobile Demo
- web项目404错误统一跳转
- 用JavaScript访问SAP云平台上的服务遇到跨域问题该怎么办
- 一秒点击手机屏幕次数_手机电池不耐用,都怪这些充电坏毛病
- 数据库单表千万行 LIKE 搜索优化手记
- 三年Java开发,你连基础的JVM运行时内存布局都忘了
- [警告] multi-字符 character constant [-Wmultichar] ----字符+符号输出错误
- 自制工具:CSV代码生成器:自动生成CSV文件对应的C++实体类和字段类型解析代码
- Android的Scroller介绍
- ios查看苹果app的下载量,日活,销售情况等相关数据
- 哪个版本的linux适合个人主机,2020年适合个人使用的Linux发行版推荐TOP5
- 卸载Oracle11g的步骤
- 打开.md格式文件的方式
- python是一种蟒蛇使用的语言_python树莓派系列教程一:初识大蟒蛇 python(python语言环境搭建篇)...
- 什么是Chrome稳定版,Beta版,Dev版和Canary版发布渠道?(转载)
- linux系统下,wps缺少windows字体的问题。
- 微软使用郑码输入法10年未付费遭起诉
- 软工1816 · 团队现场编程实战(抽奖系统)
- 国际域名相关仲裁政策法规
热门文章
- php水平线代码,在HTML中水平线标注与代码注释应该如何使用
- 人工智能用python还是java_学会java和python语言,可以开始搞人工智能吗?
- vba查找数据并返回单元格地址_VBA积木代码中实现反向多值查找、LIKE模糊查找...
- Python Tkinter 常用控件空间位置摆放
- 数字图像处理经典论文汇总
- 基于局部均方差相关信息的图像去噪及其在实时磨皮美容算法中的应用
- 使用opencv训练cascade分类器进行目标检测
- 中国生物医药行业供需形势透析及未来投资风险评估报告2022-2027年版
- 引用程序集没有强名称解决办法
- android 数字证书具体应用机制