史上最全的 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-

时间: 2024-08-08 09:38:25

史上最全的 UIWebview 的 JS 与 OC 交互的相关文章

【必备】史上最全的浏览器 CSS &amp; JS Hack 手册

[必备]史上最全的浏览器 CSS & JS Hack 手册 浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊! IE 选择器 Hack 1 2 3 /* IE 6 and below */ * html .s

UIWebView中JS与OC交互 WebViewJavascriptBridge的使用

一.综述 现在很多的应用都会在多种平台上发布,所以很多程序猿们都开始使用Hybrid App的设计模式.就是在app上嵌入网页,只要写一份网页代码,就可以跑在不同的系统上.在iOS中,app多是通过WebView来加载网页,由于功能需求等原因,代码中少不得要和跟网页交互. 二.原理 在iOS中,本地调用Javascript语言,是通过UIWebView中的实例方法stringByEvaluatingJavaScriptFromString:来实现的,该方法通过字符串对象的形式传入JS代码. [w

【必备】史上最全的浏览器 CSS &amp; JS Hack 手册(转)

浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊! 移动手机iphone media query Hack /* * media query for iPhone 4/4s * if targeting 2G/3G

转载自(梦想天空)【必备】史上最全的浏览器 CSS &amp; JS Hack 手册

浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊! IE 选择器 Hack 1 2 3 /* IE 6 and below */ * html .selector  {} .suckyie6.selector {}

【收藏】史上最全的浏览器 CSS &amp; JS Hack 手册

浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊! IE 选择器 Hack 1 2 3 /* IE 6 and below */ * html .selector  {} .suckyie6.selector {}

史上最全的搜索下拉提示用户交互研究——读《An Eye-tracking Study of User Interactions with Query Auto Completion》

        搜索下拉提示(Query Auto Completion,简称QAC)现在几乎是每个搜索引擎必备的基本功能,作用是在用户在搜索框输入查询词的过程中,给用户展示一系列搜索查询query供用户选择,可以方便用户输入.缩短用户搜索时间.提高用户搜索体验.在这方面的研究已经有很多,如基于上下文.基于时间序列等预测query的热度.个性化排序等,但关于用户如何与搜索下拉提示(下文简称QAC)交互的研究目前还是一个空白. 微软的Katja Hofmann前几天(11.3-11.7)刚刚填补了

.Net魔法堂:史上最全的ActiveX开发教程——ActiveX与JS间交互篇

一.前言 经过上几篇的学习,现在我们已经掌握了ActiveX的整个开发过程,但要发挥ActiveX的真正威力,必须依靠JS.下面一起来学习吧! 二.JS调用ActiveX方法 只需在UserControl子类中(即自定义的ActiveX控件中),编写公共方法即可. C# [Guid("0203DABD-51B8-4E8E-A1EB-156950EE1668")] public partial class Uploader : UserControl, IObjectSafety { p

史上最全最完整的IOS 游戏开发 PDF电子书定制下载

<iOS 5游戏开发>作者:(新西兰)James·Sugrue著 页数:191 出版社:北京市:人民邮电出版社 出版日期:2012.08 简介:<iOS5游戏开发>是一本iOS5游戏开发的基础入门书.全书使用通俗易懂的简单实例,带领读者经历构建经典动作游戏的整个周期.读者在本书的阅读过程中,将经历从开发概念.规划设计一直到编写实际代码的全过过程.本书的每一章,都将演示游戏创建过程中的一个逻辑步骤,读者将在其中学习如何创建Sprite,用触摸屏.重力感应器和屏幕游戏棒控制玩家角色等-

史上最全“大数据”学习资源整理

史上最全"大数据"学习资源整理 当前,整个互联网正在从IT时代向DT时代演进,大数据技术也正在助力企业和公众敲开DT世界大门.当今"大数据"一词的重点其实已经不仅在于数据规模的定义,它更代表着信息技术发展进入了一个新的时代,代表着爆炸性的数据信息给传统的计算技术和信息技术带来的技术挑战和困难,代表着大数据处理所需的新的技术和方法,也代表着大数据分析和应用所带来的新发明.新服务和新的发展机遇. 为了帮助大家更好深入了解大数据,云栖社区组织翻译了GitHub Aweso