史上最全的 UIWebview 的 JS 与 OC 交互
来源：伯乐在线 - 键盘风筝
链接：http://ios.jobbole.com/89330/
其实一直想给大家整理一下JS与OC的交互,但是没有合适的机会,今天借着微信小应用的发布,以及以后H5必定越来越流行,所以给大家整理一下.
交互方式有三种:
1.UIWebviewDelegate
2.JavaScriptCore
3.WebViewJavascriptBridge
按照排序给大家介绍一下,我推荐前两种方法,第三种需要依赖第三方框架,并且不一定能拦截成功,所以着重介绍前两种,第三种知道怎么操作就行了
1.UIWebviewDelegate
第一种也是最简单的一种,我在实际项目中就用的这个方法,根据UIWebviewDelegate的代理方法进行拦截
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
点击新闻按钮,根据shouldStartLoadWithRequest这个方法,打印出返回的url地址为
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSString *requestStr = [request.URL absoluteString];
NSLog(@"%@",requestStr);
//判断返回的url是否包含news这个字符串,如果有进入if判断,进行拦截,如果没有,则return YES,放行;
NSRange newRange = [[requestStr lowercaseString] rangeOfString:@"news"];
if (newRange.length > 0) {
//进行你需要的操作
return NO;
}
return YES;
}
2.JavaScriptCore
这个是iOS7之后苹果推出的一个JS于OC交互的一个框架,极大的方便了我们对js的操作
相关的几个类
/*
JS执行的环境，同时也通过JSVirtualMachine管理着所有对象的生命周期，每个JSValue都和JSContext相关联并且强引用context。
*/
#import "JSContext.h"
/*
JS对象在JSVirtualMachine中的一个强引用，其实就是Hybird对象。我们对JS的操作都是通过它。并且每个JSValue都是强引用一个context。同时，OC和JS对象之间的转换也是通过它
*/
#import "JSValue.h"
/*
JS和OC对象的内存管理辅助对象。由于JS内存管理是垃圾回收，并且JS中的对象都是强引用，而OC是引用计数。如果双方相互引用，势必会造成循环引用，而导致内存泄露。我们可以用JSManagedValue保存JSValue来避免。
*/
#import "JSManagedValue.h"
/*
JS运行的虚拟机，有独立的堆空间和垃圾回收机制。
*/
#import "JSVirtualMachine.h"
/*
一个协议，如果JS对象想直接调用OC对象里面的方法和属性，那么这个OC对象只要实现这个JSExport协议就可以了。
*/
#import "JSExport.h"
接下来就是如何去通过js来调用oc的方法了
//首先你要在本地的html文件里注册一个按钮,按钮的打击名字jsButton
JavaScriptCore测试页面
//首先你要在本地的html文件里注册一个按钮,按钮的打击名字jsButton
<!DOCTYPE HTML>
<html lang="zh-CN">
<body>
<p>JavaScriptCore测试页面</p>
<body>
<button onclick="jsButton()">JS按钮</button>
</body>
</html>
//然后在加载完成的方法里通过JSContext来获取相应操作的key值.key值是html文件里点击方法的名字,并且调用你需要的操作
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"jsButton"] = ^{
//在这里调用你需要的操作
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"点击了JS按钮" message:@"" preferredStyle:(UIAlertControllerStyleAlert)];
UIAlertAction *sureAlertAction = [UIAlertAction actionWithTitle:@"OK" style:(UIAlertActionStyleDefault) handler:^(UIAlertAction * _Nonnull action) {
}];
[alert addAction:sureAlertAction];
[self presentViewController:alert animated:YES completion:^{
}];
};
}
3.WebViewJavascriptBridge
第三种方法是通过WebViewJavascriptBridge这个第三方库,把js和oc之间搭建一个桥,来实现相互通信,这个是我最不推荐的一种方法,因为他需要依赖第三方库来实现,通过互相注册方法,增加代码量并且并不是每次方法都能注册上,有一定的失败几率,由于不推荐,所以就安排在最后,不做太详细的解释
3.1创建webview
UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:webView];
NSString *path = [[NSBundle mainBundle] pathForResource:@"JSBridge" ofType:@"html"];
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
NSString *htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[webView loadHTMLString:htmlString baseURL:baseURL];
[self.view addSubview:webView];
3.2创建WebViewJavascriptBridge
[WebViewJavascriptBridge enableLogging];
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];
3.3注册js要调用Native
//handlerName:需要调用js的名字
//handler:需要oc进行的操作
- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
[_bridge registerHandler:@"scanClick" handler:^(id data, WVJBResponseCallback responseCallback) {
//需要进行的操作
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"点击了按钮" message:@"" preferredStyle:(UIAlertControllerStyleAlert)];
UIAlertAction *sureAlertAction = [UIAlertAction actionWithTitle:@"OK" style:(UIAlertActionStyleDefault) handler:^(UIAlertAction * _Nonnull action) {
}];
[alert addAction:sureAlertAction];
[self presentViewController:alert animated:YES completion:^{
}];
}];
demo地址：https://github.com/summer7659/webview-js-oc-
史上最全的 UIWebview 的 JS 与 OC 交互的更多相关文章
- 【必备】史上最全的浏览器 CSS & JS Hack 手册
[必备]史上最全的浏览器 CSS & JS Hack 手册 浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技 ...
- UIWebView中JS与OC交互 WebViewJavascriptBridge的使用
一.综述 现在很多的应用都会在多种平台上发布,所以很多程序猿们都开始使用Hybrid App的设计模式.就是在app上嵌入网页,只要写一份网页代码,就可以跑在不同的系统上.在iOS中,app多是通过W ...
- 【必备】史上最全的浏览器 CSS & JS Hack 手册(转)
浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向 ...
- 史上最全的浏览器 CSS & JS Hack 手册
浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向 ...
- 【收藏】史上最全的浏览器 CSS & JS Hack 手册
浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向 ...
- .Net魔法堂：史上最全的ActiveX开发教程——ActiveX与JS间交互篇
一.前言 经过上几篇的学习,现在我们已经掌握了ActiveX的整个开发过程,但要发挥ActiveX的真正威力,必须依靠JS.下面一起来学习吧! 二.JS调用ActiveX方法 只需在UserContr ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- .Net魔法堂：史上最全的ActiveX开发教程——自动更新、卸载篇
一.前言 B/S模式的特点之一,客户端版本升级相对简单.快捷,适合产品的快速迭代.而ActiveX组件的自动更新同样也继承了这一优点.下面我们一起来了解吧! 二.二话不说更新ActiveX 1. 设置 ...
随机推荐
- vim插件开发初步
[vim插件开发初步] 将如下代码存在helloworld.vim, 放在~/.vim/plugin目录下,插件即可生效.:w保存代码后, 用:source命令执行后,也可以使用Helloworld命 ...
- class bool
class bool(int): """ bool(x) -> bool Returns True when the argument x is true, Fal ...
- Spring4.0+Hibernate4.0+Struts2.3整合包括增删改查案例，解决整合中出现的异常
源码下载:http://download.csdn.net/detail/cmcc_1234/7034775 ======================Application.xml======== ...
- 后台动态设置前台标签内容和属性(转自http://www.wzsky.net/html/Program/net/26171.html）
和以前的asp不同,在asp.net中为了彻底的代码分离,我们一般不采用<%=%>嵌入标签中来设置一些属性和内容.一般来说有2种情况:(一)设置标签的内容,比如<title>这 ...
- Firefox 设置技巧
在Firefox地址栏中输入“about:cache”并键入回车,接着将显示Firefox的内存缓冲设置与磁盘高速缓存设置.如果在页面上单击“List Cache Entries”链接,我们还可以查看 ...
- SQLServer2005 提示 '其他会话正在使用事务的上下文'
MSDN上看了一下说是sql server 2005不支持在分布式事务处理中存在指向本地的链接服务器(环回链接服务器) 这个是官方的回答 个人认为,应该是在事务中,使用了链接服务器访问进行跨库访问引起 ...
- sqlserver锁表、解锁、查看锁表
sqlserver锁表.解锁.查看锁表 http://www.cnblogs.com/zfanlong1314/p/3698566.html http://www.cnblogs.com/chjf20 ...
- 本地存储（cookie&sessionStorage&localStorage）
好文章,最全面.就查它吧:https://segmentfault.com/a/1190000004556040 1.DOM存储:https://developer.mozilla.org/zh-CN ...
- Flex应用程序如何启动
Flex应用程序启动 编写一个简单的Flex应用程序并不复杂,就算你从来没接触过Flex程序设计,照着帮助的实例步骤,不需花多长时间也能做出一个漂亮简捷的小程序出来.不过,随着对Flex程序编写的深入 ...
- Form动态下拉框
FORM级触发器:WHEN-NEW-FORM-INSTANCE 1.定义: V_LIST_NAME11 VARCHAR2(100) := 'QUERY_FIND.UPDATE_TYPE' ...