来源：蜘蛛抓取(WebSpider)
时间：2016-04-26 09:30
标签：
ios webview js
iOS上应用WebViewJavascriptBridge实现与js交互的细节？
WebViewJavascriptBridge很好的实现了js与oc的交互；但很多使用细节问题不够清楚：1.WebViewJavascriptBridge放到AppDelegate好，还是UIWebView，还是Controller好2.OC中实现js的方法怎么封装；3.怎么跟js端确定发送的数据内容已经格式，做到足够的通用；比如一个Alert4.对数据的解析，怎么定义一个通用的解析数据规则；5.oc给js回传数据的时候，是否需要多线程或者信号来确定oc方法已经执行完毕获得数据了；
；问题可能略有些小白，接触编程时间不长，希望得到大神指点。。。
按投票排序
谢邀~我没明白你问的是WebViewJavascriptBridge的用法还是WebViewJavascriptBridge的内部实现细节。如果你想知道的是WebViewJavascriptBridge的实现细节，直接看代码就好了，开源的，而且代码也不多。下面我只针对你的问题说说WebViewJavascriptBridge的一般用法吧~1. 放在controller比较好，一个bridge只用来控制一个webview和OC的交互，一般情况下一个viewcontroller对应一个webview。而且放在controller内也符合bridge的角色2. WebViewJavascriptBridge已经封装好了实现细节，你只需要通过block的方式调用就好了3. 没明白什么意思4. 实际上WebViewJavascriptBridge会自动把数据转成相应的对象，比如会把OC的NSDictionary转成JS下的成员对象，会把JS的数组解析成OC的 NSArray，你只需要直接使用就好了，并不需要特定的解析~5. 要确定的话可以使用带有callback的方法来确定，比如OC给JS传数据oc代码如下：[_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
NSLog(@"JS确定收到数据的回调: %@", response);
JS的代码如下bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
// 收到OC的消息，这里进行业务处理
var responseData = { 'data':'data value' }
responseCallback(responseData)//这里可以直接callback到OC的responseCallback里面
只要你在JS中处理完成业务后调用 responseCallback 了，在OC中就会通过 responseCallback 收到回调消息，从而确定执行完毕~另外，针对最后一个问题，其实webview的渲染是独立线程的，包括你运行的JS代码实际上都是异步的，所以不要用面向过程的思维来考虑代码是否执行完毕，一切都是通过callback来通信的，只要做到在需要的时候正确调用到相应的代码段就好了。更多用法其实你可以参考我的博文：
不多说，这个讲的比较详细：
用纯文字的方式描述一遍:相当于要让html的网页收到用户点击后调用app的方法，就需要将html按钮的点击事件(js中实现)和app关联起来 .桥接本身就是将webview加入，同时可以收到js端发过来的消息,这样就可以完成js和原生的交互.因为webview本身是加载了html页面,而webview自身还可以通过stringByEvaluatingJavaScriptFromString方法和html交互,所以webview向html发的消息就是一个在js里面定义好的方法(这里名称要相同否则收不到的)，这个消息的意思是如果html受到点击那么就通过bridge的回调返回一个json字符串，对字符串解析把相应的值加入到回调的参数中，然后执行回调，这样app的方法就被执行了。
已有帐号？
无法登录？
社交帐号登录<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&iOS webView加载本地html 调用 js,css (基本使用)
iOS webView加载本地html 调用 js,css (基本使用)
[摘要：起首减载当地的html文件: NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]; NSString *path = [[NSBundle mainBundle] pathForResource:@post.dark ofType:@html]; NSString *html = [NSString stringWithContentsOfF]
首先加载本地的html文件:
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
NSString *path = [[NSBundle mainBundle] pathForResource:@&post.dark& ofType:@&html&];
NSString *html = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[_javaWebView loadHTMLString:html baseURL:baseURL];
然后调用webView的dai里方法:
- (void)webViewDidFinishLoad:(UIWebView *)webView
[webView stringByEvaluatingJavaScriptFromString:JSstringAction];
可以用这个方法向js文件进行传值,调用js方法,给js方法设置参数:
&!DOCTYPE HTML& &html& &head&
&title&&/title&
&meta charset=&utf-8&&
&meta name=&viewport& content=&width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no& /&
&link rel=&stylesheet& href=&app.light.css& type=&text/css&&&/link&
&script src=&zepto.min.js& type=&text/javascript&&&/script&
&script src=&app.js& type=&text/javascript&&&/script& &/head& &body&
&div id=&title&& &!--
四色丛林迷彩减肥睡？--&
&div id=&author_avatar&& &!--
&p&&img src=&/uc_server/avatar.php?size=middle&uid=13931&/&  军品志&/p&--&
&div id=&page_header&&&/div&
&div id=&content&&
//传入内容
&div id=&page_footer&&&/div&
&div id=&page_bottom&&&/div& &/body&
function initBody1(para) {
var pageContent = $(&#content&);
pageContent.html(para);
pageContent.css('font-size','100% ');
function initBody2(para) {
var pageContent = $(&#content&);
pageContent.html(para);
pageContent.css('font-size','120% '); }
#content {
color: #1a1a1a;
font-size: 100%;
margin: 0 1
line-height: 150%;
letter-spacing: 50%;
word-wrap: break-
word-break: /*
white-space: pre-*/
text-align: } #content p {
margin: 1 } #content img {
/* keep aspect ratio, use max width */
max-width:100%;
/* center image */
display: } #content .img_desc {
color:#888888;
font-size:75%;
line-height:120%;
margin-bottom:0.4 }
可以对css的&#content&做修改 &达到想要的效果 &
我们通过[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@&initBody2('%@')&,self.titleStr]];向js文件传送content 在传到html & & 在掉用css进行改变.
t#content {
& & color: #1a1a1a;
& & font-size: 100%;
& & margin: 0 1
& & line-height: 150%;
& & letter-spacing: 50%;
& & word-wrap: break-
& & word-break:
/*& & white-space: pre-*/
& & text-align:
#content p {
& & margin: 1
#content img {
& & /* keep aspect ratio, use max width */
& & max-width:100%;
& & height:
& & /* center image */
& & margin:1
& & display:
#content .img_desc {
& & color:#888888;
& & font-size:75%;
& & line-height:120%;
& & margin-bottom:0.4
感谢关注 Ithao123JS频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
Hadoop是一个由Apache基金会所开发的分布式系统基础架构。
用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。
Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。
Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。
产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
IThao123周刊出处： 1，具体的思路如下： 在android中写一个Activity，里面写一个webview，这个webview加载本地的一个html文件，显示这个网页，这个网页包括一个用户名和密码的输入框和两个按钮（只有登陆按钮有用），输入用户名密码之后调用android中的类，并把输入的数据传过去，再在android中输出出来（具体你那数据做什么操作就看你的需求了），这样就做大额js与android数据交互的效果了： 在android端，一些webviwe的设置和自定义类的写法如下源码： package com.example. import android.app.A
import android.os.B
import android.webkit.JavascriptI
import android.webkit.WebChromeC
import android.webkit.WebS
import android.webkit.WebV public class MainActivity extends Activity {
private WebV
private String URL = &http://192.168.31.122/word2/login.html&;//这是你要访问你html文件的存放地址，我这个是放在appache中的word文件夹下的login.html文件
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webview = (WebView) findViewById(R.id.webView1);
WebSettings webset = webview.getSettings();
webset.setJavaScriptEnabled(true);// 表示webview可以执行服务器端的js代码
webview.setWebChromeClient(new WebChromeClient(){});
webview.addJavascriptInterface(new JsObject(),&jsObject&);
webview.loadUrl(URL);
public class JsObject {
@JavascriptInterface
public void getMessage(String name, String pwd) {
// TODO Auto-generated method stub
System.out.println(&===&+&name:& + name + &---pwd:& + pwd);
}
} 而xml比较简单，只是一个比较简单的webview而已，代码如下： &LinearLayout xmlns:android=&/apk/res/android& android:layout_width=&fill_parent&
android:layout_height=&fill_parent&
android:orientation=&vertical& &
&WebView
android:id=&@+id/webView1&
android:layout_width=&match_parent&
android:layout_height=&match_parent& /& &/LinearLayout& 对于要加载的html文件只要放在你要访问的地方就可以，比如appache下，具体代码如下：
&!DOCTYPE html&
&html&
&head&
&script&
function login(){
var th = document.
var user = th.user.
if(user==&&){
alert(&请输入用户名!&);
}else{
var name = th.user.
var pwd = th.pwd.
var name2 = jsObject.getMessage(name,pwd);
}
}
&/script&
&/head&
&body&
&form name=&form& method=&post& class=&form& action=&&&
&table id=&login_table&&
&tr&
&td&
&span&账号:&/sapn&
&/td&
&td&
&input type=&text& class=&usr& name=&user& value=&&/&
&/td&
&td&&/td&
&/tr&
&tr&
&td&
&span&密码:&/sapn&
&/td&
&td&
&input type=&password& class=&psw& name=&pwd& value=&&/&
&/td&
&td&&/td&
&/tr&
&tr&
&td&&/td&
&td&
&input type=&file& value=&上传图片& /&
&button class=&denglu& onclick=&login()&&登陆&/button&
&button class=&clear&&清空&/button&
&/td&
&td&&/td&
&/tr&
&/table&
&/form&
&/body&
&/html&
本文链接：
，转载请注明。相关 [webview js android] 推荐：
- ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中，. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.
- 移动开发 - ITeye博客
Android和iOS系统都提供了标准的浏览器控件，在Android中是WebView，iOS中为UIWebView. 在iOS中你实例化一 个UIWebView即可调用loadRequest来加载一个网页，但是在Android中你不仅需要创建一个WebView，还需要做一些其他的事 情，建议初次使用WebView的读者按照以下步骤使用：.
- 博客园_首页
在android中写一个Activity，里面写一个webview，这个webview加载本地的一个html文件，显示这个网页，这个网页包括一个用户名和密码的输入框和两个按钮（只有登陆按钮有用），输入用户名密码之后调用android中的类，并把输入的数据传过去，再在android中输出出来（具体你那数据做什么操作就看你的需求了），这样就做大额js与android数据交互的效果了：.
- CSDN博客推荐文章
最近把做好的iPad HybridApp向Android迁移，碰到的坑太多了，让我这个折腾过Android接近4年的老鸟都头疼. 现在把前人遇到的都列出来，再慢慢解决自己的，目前已经解决了android键盘覆盖问题，下面最棘手的问题就是屏幕高度的适配问题了. 1、 Andrid4.1事件穿透BUG 原因不明.
- SegmentFault 最新的文章
在android内打开一个网页的时候，有时我们会要求与网页有一些交互. 而这些交互是在基于javaScript的基础上. 那么我们来学习一下android如何与网页进行JS交互. protected V// 刷新按钮. protected String url = &&;// 网址url.
- ITeye博客
使能javascript：. 编写自己的WebViewClient，并在onPageFinished中提取网页源码. 运行，可以看到在showSource(String html)中打印了网页源码. 已有
0 人发表留言，猛击-&&
这里&&-参与讨论. —软件人才免语言低担保 赴美带薪读研.
- 博客园_首页
上一篇博文：
Android WebView使用基础已经说了一些Android中WebView的基本使用. 本篇文章主要介绍WebView中的JavaScript代码的执行相关，已经JS代码与Android代码的互相调用. （因为本人对Web开发并不是很熟悉，所以如果有哪些地方说得不对，还请指正.
- 移动开发 - ITeye博客
关注微信号：javalearns
随时随地学Java. 目前Android WebView问题越来越多，接下来由爱内测（）的技术工程师为我们介绍几种常见的Android WebView问题：. 1.为WebView自定义错误显示界面: /** * 显示自定义错误提示页面，用一个View覆盖在WebView */ protected void showErrorPage() { LinearLayout webParentView = (LinearLayout)mWebView.getParent();.
- CSDN博客移动开发推荐文章
Android 中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true. Android（Java）与JavaScript（HTML）交互有四种情况：. 1） Android（Java）调用HTML中js代码. 2） Android（Java）调用HTML中js代码（带参数）.
在WebView里加载SSL网页很正常，也没什么难度. 但如果要加载的SSL页面的证书有问题，比如过期、信息不正确、发行机关不被信任等，WebView就会拒绝加载该网页. PC上的浏览器会弹出证书错误的对话框，提示你是否要无视错误继续浏览. 实际上在WebView里也可以这样做，以实现加载证书有问题的页面.
坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：@。WebViewJavascriptBridge JS与iOS Native Code互调方法
WebViewJavascriptBridge JS与iOS Native Code互调方法
本篇为大家介绍一个优秀的国人开发开源小项目：WebViewJavascriptBridge。
它优雅地实现了在使用UIWebView时JS与ios 的Objective-C nativecode之间的互调，支持消息发送、接收、消息处理器的注册与调用以及设置消息处理的回调。
就像项目的名称一样，它是连接UIWebView和Javascript的bridge。在加入这个项目之后，他们之间的交互处理方式变得很友好。
在native code中跟UIWebView中的js交互的时候，像下面这样：
//发送一条消息给UI端并定义回调处理逻辑
[_bridge send:@&A string sent from ObjC before Webview has loaded.& responseCallback:^(id error, id responseData) {
if (error) { NSLog(@&Uh oh - I got an error: %@&, error); }
NSLog(@&objc got response! %@ %@&, error, responseData);
而在UIWebView中的js跟native code交互的时候也变得很简洁，比如在调用处理器的时候，就可以定义回调处理逻辑：
//调用名为testObjcCallback的native端处理器，并传递参数，同时设置回调处理逻辑
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
&span style=&white-space:pre&& &/span&log('Got response from testObjcCallback', response)
&一起来看看它的实现吧，它总共就包含了三个文件：
WebViewJavascriptBridge.h
WebViewJavascriptBridge.m
WebViewJavascriptBridge.js.txt
它们是以如下的模式进行交互的：
很明显：WebViewJavascriptBridge.js.txt主要用于衔接UIWebView中的web page，而WebViewJavascriptBridge.h/m则主要用于与ObjC的nativecode打交道。他们作为一个整体，其实起到了一个&桥梁&的作用，这三个文件封装了他们具体的交互处理方式，只开放出一些对外的涉及到业务处理的API，因此你在需要UIWebView与Nativecode交互的时候，引入该库，则无需考虑太多的交互上的问题。整个的Bridge对你来说都是透明的，你感觉编程的时候，就像是web编程的前端和后端一样清晰。
简单地罗列一下它可以实现哪些功能吧：
出于表达上的需要，对于UIWebView相关的我就称之为UI端，而objc那端的处理代码称之为Native端。
(1)UI端在初始化时支持设置消息的默认处理器(这里的消息指的是从Native端接收到的消息)
(2)从UI端向Native端发送消息，并支持对于Native端响应后的回调处理的定义
(3)UI端调用Native定义的处理器，并支持Native端响应后的回调处理定义
(4)UI端注册处理器(供Native端调用)，并支持给Native端响应处理逻辑的定义
【2】Native端
(1)Native端在初始化时支持设置消息的默认处理器(这里的消息指的是从UI端发送过来的消息)
(2)从Native端向UI端发送消息，并支持对于UI端响应后的回调处理逻辑的定义
(3)Native端调用UI端定义的处理器，并支持UI端给出响应后在Native端的回调处理逻辑的定义
(4)Native端注册处理器(供UI端调用)，并支持给UI端响应处理逻辑的定义UI端以及Native端完全是对等的两端，实现也是对等的。一段是消息的发送端，另一段就是接收端。这里为引起混淆，需要解释一下我这里使用的&响应&、&回调&在这个上下文中的定义：
(1)响应：接收端给予发送端的应答
(2)回调：发送端收到接收端的应答之后在接收端调用的处理逻辑
下面来分析一下源码：
WebViewJavascriptBridge.js.txt：
主要完成了如下工作:
(1)创建了一个用于发送消息的iFrame(通过创建一个隐藏的ifrmae，并设置它的URL来发出一个请求，从而触发UIWebView的shouldStartLoadWithRequest回调协议)
(2)创建了一个核心对象WebViewJavascriptBridge，并给它定义了几个方法，这些方法大部分是公开的API方法
(3)创建了一个事件：WebViewJavascriptBridgeReady，并dispatch(触发)了它。
对于(1)，相应的代码如下：
*创建一个iFrame，设置隐藏并加入到DOM中
function _createQueueReadyIframe(doc) {
messagingIframe = doc.createElement('iframe')
messagingIframe.style.display = 'none'
doc.documentElement.appendChild(messagingIframe)
对于(2)中的WebViewJavascriptBridge，其对象拥有如下方法：
window.WebViewJavascriptBridge = {
init: init,
send: send,
registerHandler: registerHandler,
callHandler: callHandler,
_fetchQueue: _fetchQueue,
_handleMessageFromObjC: _handleMessageFromObjC
方法的实现：
&span style=&white-space:pre&& &/span&/*
*初始化方法，注入默认的消息处理器
*默认的消息处理器用于在处理来自objc的消息时，如果该消息没有设置处理器，则采用默认处理器处理
function init(messageHandler) {
if (WebViewJavascriptBridge._messageHandler) { throw new Error('WebViewJavascriptBridge.init called twice') }
WebViewJavascriptBridge._messageHandler = messageHandler
var receivedMessages = receiveMessageQueue
receiveMessageQueue = null
//如果接收队列有消息，则处理
for (var i=0; i&receivedMessages. i++) {
_dispatchMessageFromObjC(receivedMessages[i])
&span style=&white-space:pre&& &/span&/*
*发送消息并设置回调
function send(data, responseCallback) {
_doSend({ data:data }, responseCallback)
*注册消息处理器
function registerHandler(handlerName, handler) {
messageHandlers[handlerName] = handler
*调用处理器并设置回调
function callHandler(handlerName, data, responseCallback) {
_doSend({ data:data, handlerName:handlerName }, responseCallback)
涉及到的两个内部方法：
&span style=&white-space:pre&& &/span&/*
*内部方法:消息的发送
function _doSend(message, responseCallback) {
//如果定义了回调
if (responseCallback) {
//为回调对象产生唯一标识
var callbackId = 'js_cb_'+(uniqueId++)
//并存储到一个集合对象里
responseCallbacks[callbackId] = responseCallback
//新增一个key-value对- 'callbackId':callbackId
message['callbackId'] = callbackId
sendMessageQueue.push(JSON.stringify(message))
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE
&span style=&white-space:pre&& &/span&/*
*内部方法:处理来自objc的消息
function _dispatchMessageFromObjC(messageJSON) {
setTimeout(function _timeoutDispatchMessageFromObjC() {
var message = JSON.parse(messageJSON)
var messageHandler
if (message.responseId) {
//取出回调函数对象并执行
var responseCallback = responseCallbacks[message.responseId]
responseCallback(message.error, message.responseData)
delete responseCallbacks[message.responseId]
var response
if (message.callbackId) {
var callbackResponseId = message.callbackId
response = {
respondWith: function(responseData) {
_doSend({ responseId:callbackResponseId, responseData:responseData })
respondWithError: function(error) {
_doSend({ responseId:callbackResponseId, error:error })
var handler = WebViewJavascriptBridge._messageHandler
//如果消息中已包含消息处理器，则使用该处理器；否则使用默认处理器
if (message.handlerName) {
handler = messageHandlers[message.handlerName]
handler(message.data, response)
} catch(exception) {
console.log(&WebViewJavascriptBridge: WARNING: javascript handler threw.&, message, exception)
还有两个js方法是供native端直接调用的方法(它们本身也是为native端服务的)：
&span style=&white-space:pre&& &/span&/*
*获得队列，将队列中的每个元素用分隔符分隔之后连成一个字符串【native端调用】
function _fetchQueue() {
var messageQueueString = sendMessageQueue.join(MESSAGE_SEPARATOR)
sendMessageQueue = []
return messageQueueString
&span style=&white-space:pre&& &/span&/*
*处理来自ObjC的消息【native端调用】
function _handleMessageFromObjC(messageJSON) {
//如果接收队列对象存在则入队该消息，否则直接处理
if (receiveMessageQueue) {
receiveMessageQueue.push(messageJSON)
_dispatchMessageFromObjC(messageJSON)
最后还有一段代码就是，定义一个事件并触发，同时设置设置上面定义的WebViewJavascriptBridge对象为事件的一个属性：
&span style=&white-space:pre&& &/span&var doc = document
_createQueueReadyIframe(doc)
//创建并实例化一个事件对象
var readyEvent = doc.createEvent('Events')
readyEvent.initEvent('WebViewJavascriptBridgeReady')
readyEvent.bridge = WebViewJavascriptBridge
//触发事件
doc.dispatchEvent(readyEvent)
Native端实现
其实大致跟上面的类似，只是因为语法不同(所以我上面才说两端是对等的)：WebViewJavascriptBridge.h/.m
它其实可以看作UIWebView的Controller，实现了UIWebViewDelegate协议：
@interface WebViewJavascriptBridge : NSObject &UIWebViewDelegate&
+ (id)bridgeForWebView:(UIWebView*)webView handler:(WVJBHandler)
+ (id)bridgeForWebView:(UIWebView*)webView webViewDelegate:(id &UIWebViewDelegate&)webViewDelegate handler:(WVJBHandler)
+ (void)enableL
- (void)send:(id)
- (void)send:(id)message responseCallback:(WVJBResponseCallback)responseC
- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)
- (void)callHandler:(NSString*)handlerN
- (void)callHandler:(NSString*)handlerName data:(id)
- (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseC
方法的实现其实是跟前面类似的，这里我们只看一下UIWebView的一个协议方法：shouldStartLoadWithRequest：
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
if (webView != _webView) { return YES; }
NSURL *url = [request URL];
if ([[url scheme] isEqualToString:CUSTOM_PROTOCOL_SCHEME]) {
//队列中有数据
if ([[url host] isEqualToString:QUEUE_HAS_MESSAGE]) {
//刷出队列中数据
[self _flushMessageQueue];
NSLog(@&WebViewJavascriptBridge: WARNING: Received unknown WebViewJavascriptBridge command %@://%@&, CUSTOM_PROTOCOL_SCHEME, [url path]);
return NO;
} else if (self.webViewDelegate) {
return [self.webViewDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
return YES;
&span style=&white-space:pre&& &/span&//给WebViewJavascriptBridgeReady事件注册一个Listener
document.addEventListener('WebViewJavascriptBridgeReady', onBridgeReady, false)
&span style=&white-space:pre&& &/span&//事件的响应处理
function onBridgeReady(event) {
var bridge = event.bridge
var uniqueId = 1
&span style=&white-space:pre&& &/span&//日志记录
function log(message, data) {
var log = document.getElementById('log')
var el = document.createElement('div')
el.className = 'logLine'
el.innerHTML = uniqueId++ + '. ' + message + (data ? ': ' + JSON.stringify(data) : '')
if (log.children.length) { log.insertBefore(el, log.children[0]) }
else { log.appendChild(el) }
&span style=&white-space:pre&& &/span&//初始化操作，并定义默认的消息处理逻辑
bridge.init(function(message) {
log('JS got a message', message)
&span style=&white-space:pre&& &/span&//注册一个名为testJavascriptHandler的处理器，并定义用于响应的处理逻辑
bridge.registerHandler('testJavascriptHandler', function(data, response) {
log('JS handler testJavascriptHandler was called', data)
response.respondWith({ 'Javascript Says':'Right back atcha!' })
&span style=&white-space:pre&& &/span&//创建一个发送消息给native端的按钮
var button = document.getElementById('buttons').appendChild(document.createElement('button'))
button.innerHTML = 'Send message to ObjC'
button.ontouchstart = function(e) {
e.preventDefault()
&span style=&white-space:pre&& &/span&//发送消息
bridge.send('Hello from JS button')
document.body.appendChild(document.createElement('br'))
&span style=&white-space:pre&& &/span&//创建一个用于调用native端处理器的按钮
var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
callbackButton.innerHTML = 'Fire testObjcCallback'
callbackButton.ontouchstart = function(e) {
e.preventDefault()
log(&Calling handler testObjcCallback&)
//调用名为testObjcCallback的native端处理器，并传递参数，同时设置回调处理逻辑
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
log('Got response from testObjcCallback', response)
//实例化一个webview并加入到window中去
UIWebView* webView = [[UIWebView alloc] initWithFrame:self.window.bounds];
[self.window addSubview:webView];
//启用日志记录
[WebViewJavascriptBridge enableLogging];
//实例化WebViewJavascriptBridge并定义native端的默认消息处理器
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponse *response) {
NSLog(@&ObjC received message from JS: %@&, data);
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@&ObjC got message from Javascript:& message:data delegate:nil cancelButtonTitle:@&OK& otherButtonTitles:nil];
[alert show];
//注册一个供UI端调用的名为testObjcCallback的处理器，并定义用于响应的处理逻辑
[_bridge registerHandler:@&testObjcCallback& handler:^(id data, WVJBResponse *response) {
NSLog(@&testObjcCallback called: %@&, data);
[response respondWith:@&Response from testObjcCallback&];
//发送一条消息给UI端并定义回调处理逻辑
[_bridge send:@&A string sent from ObjC before Webview has loaded.& responseCallback:^(id error, id responseData) {
if (error) { NSLog(@&Uh oh - I got an error: %@&, error); }
NSLog(@&objc got response! %@ %@&, error, responseData);
//调用一个在UI端定义的名为testJavascriptHandler的处理器，没有定义回调
[_bridge callHandler:@&testJavascriptHandler& data:[NSDictionary dictionaryWithObject:@&before ready& forKey:@&foo&]];
[self renderButtons:webView];
[self loadExamplePage:webView];
//单纯发送一条消息给UI端
[_bridge send:@&A string sent from ObjC after Webview has loaded.&];
项目运行截图：
东西很不错 &希望大家支持 呵呵!!!
温馨提示:&&&&&&&本站网站原创文章,版权归本站所有。转载请注明出处:懒人ios代码库-
亲!懒人ios代码库常来看看哦...
[相关文章]
