iOS下JS与原生的交互一
本篇主要讲的是UIWebView和JS的交互,在下一节会有wkWebView和JS交互的详解https://www.cnblogs.com/llhlj/p/9144110.html
JS调用原生OC
方式一:url拦截,这里略过
注意:在iOS中拦截到的url scheme将全部转化为小写;
html中需要设置编码,否则中文参数可能会出现编码问题;
JS用打开一个iFrame的方式替代直接用document.location的方式,document.location 有一个很严重的问题,就是如果我们连续 2 次改 document.location 的话,在 delegate 方法中,只能截获后面那次请求,前一次请求由于很快被替换掉,所以被忽略掉。
方式二:通过JavaScriptCore(iOS 7之后),用来做JS交互,因此JS与原生OC交互也变得简单了许多。
//获取js上下文,及本地添加js调用方法,一般情况下都放在-(void)webViewDidFinishLoad:(UIWebView *)webView方法里。
-(void)webViewDidFinishLoad:(UIWebView *)webView{
//获取js上下文
self.jscontext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //添加js代用方法
self.jscontext[@"octestFunc"]= ^(){
//oc逻辑
NSArray *array = [JSContext currentArguments];
for (NSString *value in array) {
NSLog(@"收到js值:%@",value);
}
return @"oc";//也可以没有返回值
};
//异常处理 当oc本地调用的js方法不存时,会打印异常信息,注意只有通过上下文调用的才会异常处理如oc调用js方式2、3
self.jscontext.exceptionHandler = ^(JSContext* context,JSValue *exceptionValue){
NSLog(@"异常信息:%@", exceptionValue);
}; }
方式三:同方式二相似,通过JSExport协议
自定义协议
@protocol JSObjcDelegate<JSExport>//自定义协议
//自定义交互方法
-(id)getMessage:(id)msg;
@end
@interface WebViewController ()<UIWebViewDelegate,JSObjcDelegate>
@property(nonatomic,strong)UIWebView *webView;
@property(nonatomic,strong)JSContext *jscontext;
@end
设置代理
-(void)webViewDidFinishLoad:(UIWebView *)webView{
//获取js上下文
self.jscontext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//设置代理
self.jscontext[@"ios"]= self;
//异常处理 当oc本地调用的js方法不存时,会打印异常信息,注意只有通过上下文调用的才会异常处理如oc调用js方式2、3
self.jscontext.exceptionHandler = ^(JSContext* context,JSValue *exceptionValue){
NSLog(@"异常信息:%@", exceptionValue);
};
}
代理方法的实现
//代理方法的实现
-(id)getMessage:(id)message{
NSLog(@"getMessage-------%@",message);
return @"oc";//返回值可以没有
}
OC调用JS
-(void)callJSFunc{
//方式1
// NSString *jsText = [NSString stringWithFormat:@"ocCallJSFunc('%@')",@"哈哈"];
// id value = [self.webView stringByEvaluatingJavaScriptFromString:jsText];//也可能没有返回值
// NSLog(@"value-----%@",value); //方式2
// JSValue *callback = self.jscontext[@"ocCallJSFunc"];
// id value2 = [callback callWithArguments:@[@"222"]];
// NSLog(@"value2-----%@",value2);
//方式3
NSString *jsText = @"ocCallJSFunc('222')";
id value3 = [self.jscontext evaluateScript:jsText];
NSLog(@"value3-----%@",value3); }
注意:stringByEvaluatingJavaScriptFromString是一个同步的方法,使用它执行JS方法时,如果JS 方法比较耗的时候,会造成界面卡顿。
官方推荐使用WKWebView(ios8)的evaluateJavaScript:completionHandler:代替这个方法。
iOS下JS与原生的交互一的更多相关文章
- iOS下JS与原生的交互二
本篇主要讲的是UIWebView和JS的交互,UIWebView和JS交互的详解https://www.cnblogs.com/llhlj/p/6429431.html 一. WKWebView调用J ...
- iOS下JS与原生OC互相调用(总结)
这是去年总结的一篇文章,也一并先放到这个目录下好了. iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇 方 ...
- iOS下JS与OC互相调用(一)--UIWebView 拦截URL
最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换.顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊.目前我已知的JS 与 OC 交互的处理方式: * 1 ...
- iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge
WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...
- iOS下JS与OC互相调用(四)--JavaScriptCore
前面讲完拦截URL的方式实现JS与OC互相调用,终于到JavaScriptCore了.它是从iOS7开始加入的,用 Objective-C 把 WebKit 的 JavaScript 引擎封装了一下, ...
- iOS下JS与OC互相调用
背景情况: app项目中有几个界面是需要经常变动的(不仅是内容还有UI布局等),比如活动宣传界面就是属于这一类.但是由于AppStore提交审核也是需要时间的,就算审核快,也不至于每次都为了这点事频繁 ...
- iOS开发--JS调用原生OC篇
JS调用原生OC篇 方式一(反正我不用) 第一种方式是用JS发起一个假的URL请求,然后利用UIWebView的代理方法拦截这次请求,然后再做相应的处理. 我写了一个简单的HTML网页和一个btn点击 ...
- iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge
上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用,这一篇来介绍一下WKWebView 又是如何通过WebViewJavascr ...
- iOS下JS与OC互相调用(八)--Cordova详解+实战
扯两句,可以跳过 由于项目中Cordova相关功能一直是同事在负责,所以也没有仔细的去探究Cordova到底是怎么使用的,又是如何实现JS 与 OC 的交互.所以我基本上是从零开始研究和学习Cordo ...
随机推荐
- 必应壁纸php获取接口
<?php if($_GET['idx']==null){ $str=file_get_contents('http://cn.bing.com/HPImageArchive.aspx?idx= ...
- oracle,mysql,SqlServer三种数据库的分页查询
MySql: MySQL数据库实现分页比较简单,提供了 LIMIT函数.一般只需要直接写到sql语句后面就行了.LIMIT子 句可以用来限制由SELECT语句返回过来的数据数量,它有一个或两个参数,如 ...
- 用 k8s 运行一次性任务【转】
容器按照持续运行的时间可分为两类:服务类容器和工作类容器. 服务类容器通常持续提供服务,需要一直运行,比如 http server,daemon 等.工作类容器则是一次性任务,比如批处理程序,完成后容 ...
- 5G/NR OTA (Over The Air) 测试详解
原文链接:http://www.sharetechnote.com/html/5G/5G_OTA.html 1 什么是OTA (Over The Air) OTA代表Over The Air.为了使用 ...
- 微信小程序支付功能前端流程
只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app). handleCreate () { /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 ...
- C++面试常见问题——12虚函数
虚函数 虚函数的工作原理 虚函数的实现要求对象携带额外的信息,这些信息用于确定运行时调用哪一个虚函数,这一信息具有一种被称为虚函数表指针(vptr)的指针形式.vptr指向一个被称为虚函数表(vtbl ...
- 真香的flex弹性布局
如何实现一个左中右的布局 在flex出现之前 #box{ color: white; } #left{ float: left; width: 30%; background-color: red; ...
- Day5 - C - Agri-Net POJ - 1258
Farmer John has been elected mayor of his town! One of his campaign promises was to bring internet c ...
- 1.Maven分模块,分工程管理,多Web应用合并war包
Eclipse 创建Maven工程 修改POM文件 Eclipse 创建Module工程 以此类推,创建Maven 的Modules web工程goodsmgrweb,创建Maven的Module ...
- 利用jQuery实现PC端href生效,移动端href失效
今天要写一个功能,记录一下吧.if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){ $('.item-a').attr('href' ...