本篇主要讲的是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与原生的交互一的更多相关文章

  1. iOS下JS与原生的交互二

    本篇主要讲的是UIWebView和JS的交互,UIWebView和JS交互的详解https://www.cnblogs.com/llhlj/p/6429431.html 一. WKWebView调用J ...

  2. iOS下JS与原生OC互相调用(总结)

    这是去年总结的一篇文章,也一并先放到这个目录下好了. iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇 方 ...

  3. iOS下JS与OC互相调用(一)--UIWebView 拦截URL

    最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换.顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊.目前我已知的JS 与 OC 交互的处理方式: * 1 ...

  4. iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge

    WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...

  5. iOS下JS与OC互相调用(四)--JavaScriptCore

    前面讲完拦截URL的方式实现JS与OC互相调用,终于到JavaScriptCore了.它是从iOS7开始加入的,用 Objective-C 把 WebKit 的 JavaScript 引擎封装了一下, ...

  6. iOS下JS与OC互相调用

    背景情况: app项目中有几个界面是需要经常变动的(不仅是内容还有UI布局等),比如活动宣传界面就是属于这一类.但是由于AppStore提交审核也是需要时间的,就算审核快,也不至于每次都为了这点事频繁 ...

  7. iOS开发--JS调用原生OC篇

    JS调用原生OC篇 方式一(反正我不用) 第一种方式是用JS发起一个假的URL请求,然后利用UIWebView的代理方法拦截这次请求,然后再做相应的处理. 我写了一个简单的HTML网页和一个btn点击 ...

  8. iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

    上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用,这一篇来介绍一下WKWebView 又是如何通过WebViewJavascr ...

  9. iOS下JS与OC互相调用(八)--Cordova详解+实战

    扯两句,可以跳过 由于项目中Cordova相关功能一直是同事在负责,所以也没有仔细的去探究Cordova到底是怎么使用的,又是如何实现JS 与 OC 的交互.所以我基本上是从零开始研究和学习Cordo ...

随机推荐

  1. LeetCode347:返回频率前K高的元素,基于优先队列实现

    package com.lt.datastructure.MaxHeap; import java.util.LinkedList; import java.util.List; import jav ...

  2. 51nod 1099:任务执行顺序 贪心

    1099 任务执行顺序 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  取消关注 有N个任务需要执行,第i个任务计算时占R[i]个空间,而后会释放一部分, ...

  3. python里的def 方法中->代表什么意思?

    功能注释 函数注释是关于用户定义函数使用的类型的完全可选元数据信息(请参阅PEP 3107和 PEP 484了解更多信息). 注释__annotations__ 作为字典存储在函数的属性中,对函数的任 ...

  4. 048、Java中使用switch判断

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  5. jQuery事件 - toggle() 方法

    1.切换元素的显示与隐藏状态 实例 切换 <p> 元素的显示与隐藏状态: $(".btn1").click(function(){ $("p").h ...

  6. android studio 入门坑

    安装 android studio,碰到下面这个图片,直接跳过. 安装时候,选择自定义设置,里面可以配置 sdk 的存放位置. 新建工程后,gradle sync 比较慢,可以 修改工程中的 buil ...

  7. java注解——内置注解和四种元注解

    java内置注解: @Override(重写方法):被用于标注方法,用于说明所标注的方法是重写父类的方法 @Deprecated(过时方法):用于说明所标注元素,因存在安全问题或有更好选择而不鼓励使用 ...

  8. P30 Pro劲敌!DxO官宣新机:排行榜又要变

    均为111分,接着是华为Mate 20 Pro.P20 Pro和三星Galaxy S10+,三款机型综合得分均为109分,前10名最后三款机型分别是小米9.iPhone XS Max和HTC U12+ ...

  9. POJ 2305:Basic remains 进制转换

    Basic remains Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5221   Accepted: 2203 Des ...

  10. MYSQL 免安装版修改root密码

    c:>mysql –uroot; mysql>show databases; mysql>use mysql;//不用修改 mysql>UPDATE user SET pass ...