iOS原生代码通过webView与js脚本交互
2016-05-27 10:34
423 查看
前段时间公司的一个项目需要使用的到OC代码与js脚本的交互。对于入行不久的我,当时也是在博客里面爬文来解决。做下来之后把我自己通过实践和学习得来的东西整理一下,以便在这方面接触不多的人能够快速的掌握OC与js的交互。新手教程,大神勿喷,如有错误,多多指教。
好了前言已足,直接来干货。
开始。首先我们需要用到JavaScriptCore.framework库,所以我们需要在工程里面链接JavaScriptCore.framework库,这个我就不再赘述。
一、js脚本调OC的方法,可以将js代码的值传入OC,或者OC响应js代码的交互事件等等。
1.首先我们需要创建一份OC与js交互的协议。
#import <JavaScriptCore/JavaScriptCore.h>//首先导入头文件
/**
* 创建一个遵守了JSExport协议的协议
*/
@protocolTestJSObjectProtocol<JSExport>
/**
* 通过js代码调用本方法,并且传入页面标题值,来修改当前页面的title
*
* @param pageTitle js需要传入的页面标题
*/
-(void)setPageTitle:(NSString*)pageTitle;
@end
2.通过以上代码,我们拟定了一份交互协议,并且申明了一个方法,方法作用为通过js脚本来修改我们的页面标题。然后我们需要创建一个类来准守这份协议,并且实现它的方法。
@interfaceWebViewBridgeTool :NSObject<TestJSObjectProtocol>
@end
@implementation WebViewBridgeTool
//实现我们拟定的协议的方法
#pragma mark - <TestJSObjectProtocol>
/**
* 我们在这里实现协议里面的方法
*
* @param pageTitle pageTitle是js脚本调用这个方法的时候传入的值,我们拿到这个值之后,就可以想做什么就做什么了
*/
-(void)setPageTitle:(NSString
*)pageTitle{
NSLog(@"我们想要设置的页面标题为:%@",pageTitle);
}
@end
3.到这一步,我们需要的东西已经具备了,剩下的就是如何在js代码里面去调用setPageTitle这个方法了。接下来我们创建一个ViewController添加一个WebView来实现。
#import
"WebViewBridgeTool.h"//导入头文件
@interfacePublicWebViewController :UIViewController
@property(nonatomic,strong)WebViewBridgeTool
* app;// 我们需要将这个对象传入我们的js代码中
@property(nonatomic,strong)UIWebView
* webView;//
@end
@implementationPublicWebViewController
-(void)viewDidLoad{
[superviewDidLoad];
//初始化需要写入js代码的对象
_app=[[WebViewBridgeToolalloc]init];
//假设我们已经初始化好了webview,并且将webview的delegate设置为self
[self.viewaddSubview:self.webView];
}
#pragma mark - <UIWebViewDelegate,UIScrollViewDelegate>
/**
* 这个方式是webview的代理方式,根据名字我们知道这个方法在webview开始加载界面的时候调用,我们在网页开始加载的时候将我们的
* 交互对象通过JSContext写入到我们的js脚本里面去
*
* @param webView
*/
-(void)webViewDidStartLoad:(UIWebView*)webView{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"app"]=self.app;
}
//我在网页加载完成的时候又写入了一次
-(void)webViewDidFinishLoad:(UIWebView*)webView{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"app"]=self.app;
}
8eb3
4.通过以上操作,我们在webview加载网页的时候,把app这个对象写入了js脚本中,我们的webview里面加载的网页上的js脚本里面就会有我们的app对象。在js脚本里面就可以通过app这个对象来调用我们oc的方法了。
app.setPageTitle("新标题");//js里面的代码
值得注意的是:我们协议里面的方法如果有多个参数,除了第一个参数,后面的参数不能有参数名字,需要省略参数名字,只有一个':',否则,js无法调用。因为参数的名字也是方法名字的一部分。
-(void)showImageWithImageKeys:(NSString *)keyArrayJson
:(NSInteger)index;//显示一组图片
-(void)showImageWithImageKeys:(NSString *)keyArrayJson
index:(NSInteger)index;//不能这样写,第二个参数不应该有名字
二、OC调用js的方法,这个就相对简单。例如js里面有一个commit方法,我们可以通过名字来匹配到这个方法。
[self.webViewstringByEvaluatingJavaScriptFromString:[NSStringstringWithFormat:@"commit()"]];
如果需要传入参数,例如js里面有一个求和函数sum(a,b),我们只需要通过字符串拼接的方式将参数传入即可。
[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"sum(%d,%d)",10,5]];
以上就是简单的OC与js交互的代码,虽然有成熟框架如WebViewJavascriptBridge,但是如果你只需要最简单的交互,这种方式,也许会来的更快。
好了前言已足,直接来干货。
开始。首先我们需要用到JavaScriptCore.framework库,所以我们需要在工程里面链接JavaScriptCore.framework库,这个我就不再赘述。
一、js脚本调OC的方法,可以将js代码的值传入OC,或者OC响应js代码的交互事件等等。
1.首先我们需要创建一份OC与js交互的协议。
#import <JavaScriptCore/JavaScriptCore.h>//首先导入头文件
/**
* 创建一个遵守了JSExport协议的协议
*/
@protocolTestJSObjectProtocol<JSExport>
/**
* 通过js代码调用本方法,并且传入页面标题值,来修改当前页面的title
*
* @param pageTitle js需要传入的页面标题
*/
-(void)setPageTitle:(NSString*)pageTitle;
@end
2.通过以上代码,我们拟定了一份交互协议,并且申明了一个方法,方法作用为通过js脚本来修改我们的页面标题。然后我们需要创建一个类来准守这份协议,并且实现它的方法。
@interfaceWebViewBridgeTool :NSObject<TestJSObjectProtocol>
@end
@implementation WebViewBridgeTool
//实现我们拟定的协议的方法
#pragma mark - <TestJSObjectProtocol>
/**
* 我们在这里实现协议里面的方法
*
* @param pageTitle pageTitle是js脚本调用这个方法的时候传入的值,我们拿到这个值之后,就可以想做什么就做什么了
*/
-(void)setPageTitle:(NSString
*)pageTitle{
NSLog(@"我们想要设置的页面标题为:%@",pageTitle);
}
@end
3.到这一步,我们需要的东西已经具备了,剩下的就是如何在js代码里面去调用setPageTitle这个方法了。接下来我们创建一个ViewController添加一个WebView来实现。
#import
"WebViewBridgeTool.h"//导入头文件
@interfacePublicWebViewController :UIViewController
@property(nonatomic,strong)WebViewBridgeTool
* app;// 我们需要将这个对象传入我们的js代码中
@property(nonatomic,strong)UIWebView
* webView;//
@end
@implementationPublicWebViewController
-(void)viewDidLoad{
[superviewDidLoad];
//初始化需要写入js代码的对象
_app=[[WebViewBridgeToolalloc]init];
//假设我们已经初始化好了webview,并且将webview的delegate设置为self
[self.viewaddSubview:self.webView];
}
#pragma mark - <UIWebViewDelegate,UIScrollViewDelegate>
/**
* 这个方式是webview的代理方式,根据名字我们知道这个方法在webview开始加载界面的时候调用,我们在网页开始加载的时候将我们的
* 交互对象通过JSContext写入到我们的js脚本里面去
*
* @param webView
*/
-(void)webViewDidStartLoad:(UIWebView*)webView{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"app"]=self.app;
}
//我在网页加载完成的时候又写入了一次
-(void)webViewDidFinishLoad:(UIWebView*)webView{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"app"]=self.app;
}
8eb3
4.通过以上操作,我们在webview加载网页的时候,把app这个对象写入了js脚本中,我们的webview里面加载的网页上的js脚本里面就会有我们的app对象。在js脚本里面就可以通过app这个对象来调用我们oc的方法了。
app.setPageTitle("新标题");//js里面的代码
值得注意的是:我们协议里面的方法如果有多个参数,除了第一个参数,后面的参数不能有参数名字,需要省略参数名字,只有一个':',否则,js无法调用。因为参数的名字也是方法名字的一部分。
-(void)showImageWithImageKeys:(NSString *)keyArrayJson
:(NSInteger)index;//显示一组图片
-(void)showImageWithImageKeys:(NSString *)keyArrayJson
index:(NSInteger)index;//不能这样写,第二个参数不应该有名字
二、OC调用js的方法,这个就相对简单。例如js里面有一个commit方法,我们可以通过名字来匹配到这个方法。
[self.webViewstringByEvaluatingJavaScriptFromString:[NSStringstringWithFormat:@"commit()"]];
如果需要传入参数,例如js里面有一个求和函数sum(a,b),我们只需要通过字符串拼接的方式将参数传入即可。
[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"sum(%d,%d)",10,5]];
以上就是简单的OC与js交互的代码,虽然有成熟框架如WebViewJavascriptBridge,但是如果你只需要最简单的交互,这种方式,也许会来的更快。
相关文章推荐
- iOS—修改AFNetworking源文件可接收text/plain的方法
- iOS—修改AFNetworking源文件可接收text/plain的方法
- ios远程推送消息时运行在前台怎么处理
- pod install时出现错误"The dependency 'xxx' is not used in any concrete target"
- iOS开发之调用系统打电话发短信接口以及程序内发短信
- iOS,一行代码进行RSA、DES 、AES、MD5加密、解密(转)
- ios启动图片
- iOS:你真的理解你在用的自定义NSLog吗?
- IOS 开发者官方帮助资料查阅路径
- iOS 阿里云上传图片
- IOS icon和LaunchImage 设置
- iOS使用蓝牙的一些注意事项。
- IOS开发中的几种设计模式介绍
- opencv-ios开发笔记5 利用二值图像简单提取轮廓
- iOS设计模式 - (3)简单工厂模式
- 《Motion Design for iOS》(二十三)
- 深入了解iostream
- iOS:你真的理解你在用的自定义NSLog吗?
- IOS学习—强引用(__strong)和 弱引用(__weak)
- 【代码笔记】iOS-手机验证码