UIWebView与JS的交互方式

一,OC调用JS
直接调用苹果提供的API

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

使用方式:
OC部分:

[self.webView stringByEvaluatingJavaScriptFromString:@"add(1,2)"];

JS部分:

function add(a,b) {
return a+b;
}

二,JS调用OC
OC处理JS的时机在UIWebView的代理方法内

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

使用方式:
JS部分:

function btnClick1() {
location.href = "jsCallBack://method_?param1&param2"
}

OC部分:

NSString *schem = webView.request.URL.scheme;
if ([schem containsString:@"jsCallBack://"]) {
//action...
return NO;
}

WKWebView与JS的交互方式

一,OC调用JS
调用苹果提供的API

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

使用方式:
OC部分:

 [self.wkWebView evaluateJavaScript:@"playSount()" completionHandler:nil];

JS部分:

function playSount() {
//playSount...
}

二,JS调用OC

OC部分:
这种使用方式比较麻烦一些
1.在创建wkWebView时,需要将被js调用的方法注册进去

//创建WKWebViewConfiguration文件
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.preferences.minimumFontSize = 10.f;
[config.userContentController addScriptMessageHandler:self name:@"playSound"];
//创建WKWebView类
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];

2.在WKScriptMessageHandler代理方法中监听js的调用

#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { if ([message.name isEqualToString:@"playSound"]) {
[self playSound];
}
}

JS部分:

//JS响应事件
function btnClick() {
window.webkit.messageHandlers.playSound.postMessage(null);
}

利用JavaScriptCore库,WebView与JS的交互 

一,OC调用JS

    self.jsContent = [[JSContext alloc] init];

    NSString *js = @"function add(a,b) {return a + b}";
[self.jsContent evaluateScript:js];
JSValue *jsValue = [self.jsContent[@"add"] callWithArguments:@[@2,@3]];

二,JS调用OC

    self.jsContent = [[JSContext alloc] init];
self.jsContent[@"add"] = ^(int a, int b){
NSLog(@"a+b = %d",a+b);
}; [self.jsContent evaluateScript:@"add(10,20)"];

三,JS直接访问OC对象方法与属性

1.首先定义一个协议,这个协议遵守JSExport协议

@protocol JSExportTest <JSExport>
@property (nonatomic, assign) NSInteger sum;
JSExportAs(add, - (NSInteger)add:(int)a b:(int)b); @end

其中JSExportAs()是系统提供的宏,用来声明在JS环境中方法add与OC环境中方法- (NSInteger)add:(int)a b:(int)b对应。

2.创建一类,遵守JSExportTest协议,并实现它什么的方法与属性

@interface JSProtolObj : NSObject <JSExportTest>

@end

@implementation JSProtolObj

@synthesize sum = _sum;

- (NSInteger)add:(int)a b:(int)b {

    return a+b;
} - (void)setSum:(NSInteger)sum { _sum = sum;
} @end

3.使用方式:

    self.jsContent = [[JSContext alloc] init];

    self.jsContent.exceptionHandler = ^(JSContext *context, JSValue *exception) {
[JSContext currentContext].exception = exception;
NSLog(@"exception:%@",exception);
}; self.jsContent[@"OCobj"] = self.jsProtolObj;
[self.jsContent evaluateScript:@"OCobj.sum = OCobj.add(10,20)"];

这三种使用方式可以根据实际情况进行适当使用

WKWebView和WebView与JS的交互方式的更多相关文章

  1. WebView与 JS 交互方式

    前言 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商平台,淘宝.京东.聚划算等等,如下图 上述功能是由Android的WebView实现的,其中涉及到Android客户端与 ...

  2. Android:你要的WebView与 JS 交互方式 都在这里了

    前言 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商平台,淘宝.京东.聚划算等等,如下图 上述功能是由Android的WebView实现的,其中涉及到Android客户端与 ...

  3. webview与JS的交互

    webview与JS的交互 一:hybird app, web app 和 native app 的区别   Web App Hybird App 混合Native App 开发成本 低 中 高 维护 ...

  4. WebView与JS的几种交互

    http://www.jianshu.com/p/0042d8eb67c0 最近整理了一下原生与H5之间的交互方式,简单的做个总结.OC端与JS的交互,大致有这几种:拦截协议.JavaScriptCo ...

  5. WKWebView新特性及JS交互

    引言 一直听说WKWebView比UIWebView强大许多,可是一直没有使用到,今天花了点时间看写了个例子,对其API的使用有所了解,为了日后能少走弯路,也为了让大家更容易学习上手,这里写下这篇文章 ...

  6. UIWebView和WKWebView的使用及js交互

    UIWebView和WKWebView的使用及js交互 web页面和app直接的交互是很常见的东西,之前尝试过flex和js的相互调用以及android和js的相互调用,却只有ios没试过,据说比较复 ...

  7. WebView中Js与Android本地函数的相互调用

    介绍 随着Html5的普及,html在表现力上不一定比原生应用差,并且有很强的扩展兼容性,所以越来越多的应用是采用Html与Android原生混合开发模式实现. 既然要实现混合开发,那么Js与Andr ...

  8. 在Ubuntu15.10中,使用wxPython的webview和JS进行交互

    在Ubuntu下进行wxPython开发,因为需求,所以使用了wxPython的webview和JS的交互. 在Windows下,下图显示的代码可以正常的运行,但是在Ubuntu下进行开发,以下的代码 ...

  9. iOS webview注入JS

    - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *js = @"function imgAutoFit() { \ ...

随机推荐

  1. SDK提交到CocoaPods

    一:GitHub新建仓库,并clone到本地 1.注册GitHub账号并登录 2.右上方点击+,新建仓库(仓库名字(Repository name).仓库权限(Public).readme.licen ...

  2. Beta 第四天

    今天遇到的困难: 百度位置假死的问题研究发现并不是源于代码的问题,而是直接运行在主线程中会出现诸多问题 Fragment碎片刷新时总产生的固定位置的问题未果 今天完成的任务: 陈甘霖:修复了部分Bug ...

  3. 敏捷冲刺每日报告——Day4

    1.情况简述 Alpha阶段第一次Scrum Meeting 敏捷开发起止时间 2017.10.28 00:00 -- 2017.10.29 00:00 讨论时间地点 2017.10.28晚9:30, ...

  4. Alpha冲刺Day1

    项目Alpha冲刺Day1 一.站立式会议 照片: 今日安排: 今天是项目开始的第一天,我们小组一起开会讨论了一下具体每天代码进度的落实情况,做了一下大体的规划.另外准备搭建一下环境和项目部署. 二. ...

  5. electron-vue工程创建

    没有vue创建经验请移步至 vue下载与安装 使用vue创建electron-vue工程 vue init simulatedgreg/electron-vue my-project 安装elemen ...

  6. C语言——第一次作业

    **学习内容总结** 本周进行了算法的初步学习,用计算机的思维方式去思考问题,并学习了如何用传统程序框图表示算法. 相关内容: 1.算法是用来解决问题的方法与步骤. 2.计算机擅长重复,常用枚举的方法 ...

  7. mahony互补滤波器C编程

    //gx...分别为重力加速度在三个轴向的分力 由加速度计测得 //ax...分别为角速度在三个轴向的角速度 由陀螺仪测得 //最后得到最终滤波完毕的x.y.z方向的角度值(°) void IMUup ...

  8. MSSQL 2000 错误823恢复

    一.故障描述 MSSQL Server 2000 附加数据库错误823,附加数据库失败.数据库没有备份,不能通过备份恢复数据库,急需恢复数据库中的数据. 二.故障分析SQL Server数据库 823 ...

  9. style scoped

    scoped: 只在父div和其内容内生效,

  10. MongoDb进阶实践之三 MongoDB查询命令详述

    一.引言           上一篇文章我们已经介绍了MongoDB数据库的最基本操作,包括数据库的创建.使用和删除数据库,文档的操作也涉及到了文档的创建.删除.更新和查询,当然也包括集合的创建.重命 ...