首先采用的框架是WebViewJavascriptBridge,采用这套框架可以方便的使iOS与JS交互

一. 流程图(主要介绍思路)

二.iOS端如何使用

首先导入#import "WebViewJavascriptBridge.h"文件

第一步:开启日志

// 开启日志,方便调试
[WebViewJavascriptBridge enableLogging]; 第二步:给ObjC与JS建立桥梁 // 给哪个webview建立JS与OjbC的沟通桥梁
self.bridge = [WebViewJavascriptBridgebridgeForWebView:webView]; // 设置代理,如果不需要实现,可以不设置
[self.bridgesetWebViewDelegate:self]; 第三步:注册HandleName,用于给JS端调用iOS端 // JS主动调用OjbC的方法
// 这是JS会调用getUserIdFromObjC方法,这是OC注册给JS调用的
// JS需要回调,当然JS也可以传参数过来。data就是JS所传的参数,不一定需要传
// OC端通过responseCallback回调JS端,JS就可以得到所需要的数据
[self.bridgeregisterHandler:@"getUserIdFromObjC"handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"js call getUserIdFromObjC, data from js is %@", data);
if (responseCallback) {
// 反馈给JS
responseCallback(@{@"userId": @""});
}
}]; [self.bridgeregisterHandler:@"getBlogNameFromObjC"handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);
if (responseCallback) {
// 反馈给JS
responseCallback(@{@"blogName": @"星仔"});
}
}]; 第四步:直接调用JS端注册的HandleName [self.bridgecallHandler:@"getUserInfos"data:@{@"name": @"ddsds"}responseCallback:^(id responseData) {
NSLog(@"from js: %@", responseData);
}];

三.JS端如何使用

    <script>
window.onerror = function(err) {
log('window.onerror: ' + err)
} /*这段代码是固定的,必须要放到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) }, )
} /*与OC交互的所有JS方法都要放在此处注册,才能调用通过JS调用OC或者让OC调用这里的JS*/
setupWebViewJavascriptBridge(function(bridge) {
var uniqueId =
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[])
} else {
log.appendChild(el)
}
}
/* Initialize your app here */ /*我们在这注册一个js调用OC的方法,不带参数,且不用ObjC端反馈结果给JS:打开本demo对应的博文*/
bridge.registerHandler('openWebviewBridgeArticle', function() {
log("openWebviewBridgeArticle was called with by ObjC")
})
/*JS给ObjC提供公开的API,在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数,且可以回调ObjC*/-
bridge.registerHandler('token', function(data, responseCallback) {
log("G星爷: ", data)
responseCallback({这里给我返回拼接后的地址})
}) /*JS给ObjC提供公开的API,ObjC端通过注册,就可以在JS端调用此API时,得到回调。ObjC端可以在处理完成后,反馈给JS,这样写就是在载入页面完成时就先调用*/
bridge.callHandler('getUserIdFromObjC', function(responseData) {
log("JS call ObjC's getUserIdFromObjC function, and js received response:", responseData)
}) document.getElementById('blogIds').onclick = function (e) {
log('js call objc: getBlogNameFromObjC')
bridge.callHandler('ww', {'blogdURL': 'weidsfdl'}, function(response) {
log('JS got response', response)
})
}
}) </script>

四.注意事项

1.当出现这样的提示的话,说明JS那边已经实现了名字为‘ww’的方法,但是iOS这边没有注册,

具体实现是:
[self.bridgeregisterHandler:@"ww"handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);
if (responseCallback) {
// 反馈给JS
responseCallback(@{@"blogName": @"星仔"});
}
}]; 2. 当在push或者说页面消失的时候,将bridge对象置为空。

五.防止WebView长按实现的方法如下:

- (void)webViewDidFinishLoad:(UIWebView *)webView{
// 禁用 页面元素选择
[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"]; // 禁用 长按弹出ActionSheet
[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout='none';"];
}
												

iOS与Html5和JS之间的交互---学习笔记五的更多相关文章

  1. OC和JS之间的交互

    OC和JS之间的交互 目录 对OC和JS之间交互的理解 JS调用OC OC调用JS 对OC和JS之间交互的理解 JS调用OC JS文件 function sendCommand(cmd,param){ ...

  2. 《JS高程》事件学习笔记

    事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...

  3. 转载 【iOS开发】网页JS与OC交互(JavaScriptCore) OC ----->JS

      目标 本文介绍利用苹果在iOS7时发布的JavaScriptCore.framework框架进行js与OC的交互.我们想要达到的目标是: OC调用网页上的js方法 网页js调用APP中的OC方法 ...

  4. Android html5和Android之间的交互

    今天补充了会昨天的问题,然后搞半天又出现莫名其妙的问题. 今天讲的是交互,先说html5在Android的调用. 上面的hello world上面的部分都是安卓里的布局 然后按这些布局自动生成代码. ...

  5. 关于HPS和FPGA之间的桥接学习笔记一

    为了实现FPGA和HPS之间的存储器共享和数据传输,Altera SoC FPGA提供了两种方式用于FPGA和HPS通信.分别是FPGA to SDRAM和AXI bridge. FPGA to SD ...

  6. iOS之oc与html之间的交互(oc中调用js的方法)

    一.运行的效果图 1.刚开始的效果   2.运行结束后的效果   二.准备工作 1.准备一个html文件导入到oc工程中 2.jiaohu.html文件的原始内容   3.从oc语言中操作.html文 ...

  7. Android中webview和js之间的交互(转)

    http://www.cnblogs.com/leizhenzi/archive/2011/06/29/2093636.html 1.android中利用webview调用网页上的js代码. Andr ...

  8. android 与JS之间的交互

    在页面布局很复杂并且是动态的时候,android本身的控件就变得不是那么地灵活了,只有借助于网页的强大布局能力才能实现,但是在操作html页面的同时也需要与android其它的组件存在交互,比如说 在 ...

  9. PHP与js之间的交互

    <?php//在php中药想使用jquery,首先需要导入jquery类库 echo "<script src='".base_url('static')." ...

随机推荐

  1. 突如其来的"中断异常",我(Java)该如何处理?

    一.何为异常? 1.生活中的实例 生活中存在许多不正常: 上班路上自行车掉链子 上厕所手机掉马桶 下班回家钥匙丢失 ....... 2.程序中的实例 我们的代码中也许存在许多纰漏,导致用户使用时程序突 ...

  2. Scalaz(58)- scalaz-stream: fs2-并行运算示范,fs2 parallel processing

    从表面上来看,Stream代表一连串无穷数据元素.一连串的意思是元素有固定的排列顺序,所以对元素的运算也必须按照顺序来:完成了前面的运算再跟着进行下一个元素的运算.这样来看,Stream应该不是很好的 ...

  3. Tomcat问题,不能正确访问http://localhost:8080/

    最近在学Struts2框架部分的内容,但是eclipse中配置tomcat遇到了很大的问题,当辛辛苦苦的配置完了之后,竟让连小猫的首页都不能访问,http://localhost:8080/输入了之后 ...

  4. 使用KMP算法判断是否为旋转词

    假设有两个字符串A.B,要判断它们是否为旋转词,只需构造一个"A+A"字符串,再与B比较,若B为A的旋转词,则使用KMP算法是可以得到结果的 代码如下: import java.u ...

  5. 盘点国内11家已经获得融资的移动CRM平台

    盘点国内11家已经获得融资的移动CRM平台 亿欧网盘点了目前国内已经获得融资的11家移动CRM平台,它们分别是:纷享销客.红圈营销.小满科技.腾腾科技.麦客.美洽.销售易.快消总管.EC营客通.店小三 ...

  6. jeecg环境搭建20160707

    1.首页修改位置:src/main/webapp/webpage/main 2.tomcat45秒超时启动修改,open打开servers项目,在右上角处的timeouts参数修改: 3.eclips ...

  7. GitHub 实现多人协同提交代码并且权限分组管理

    转载请标明出处: http://www.cnblogs.com/zhaoyanjun/p/5882784.html 出自[赵彦军博客] 2016-09-19 前言: 在上一篇文章中Android gi ...

  8. Thread多线程(一)

    网上关于多线程的讲解有很多,意义也不用过多介绍,相信聪明的你早已知道,下面我们在剖析一下JAVA中的多线程的一些方法. 在JAVA中分别提供了两种方式实现多线程,分别继承Java.lang.Threa ...

  9. Android项目实战(二十五):Android studio 混淆+打包+验证是否成功

    前言: 单挑Android项目,最近即时通讯用到环信,集成sdk的时候 官方有一句 在 ProGuard 文件中加入以下 keep. -keep class com.hyphenate.** {*;} ...

  10. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...