WKWebView和WebView与JS的交互方式
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¶m2"
}
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的交互方式的更多相关文章
- WebView与 JS 交互方式
前言 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商平台,淘宝.京东.聚划算等等,如下图 上述功能是由Android的WebView实现的,其中涉及到Android客户端与 ...
- Android:你要的WebView与 JS 交互方式 都在这里了
前言 现在很多App里都内置了Web网页(Hybrid App),比如说很多电商平台,淘宝.京东.聚划算等等,如下图 上述功能是由Android的WebView实现的,其中涉及到Android客户端与 ...
- webview与JS的交互
webview与JS的交互 一:hybird app, web app 和 native app 的区别 Web App Hybird App 混合Native App 开发成本 低 中 高 维护 ...
- WebView与JS的几种交互
http://www.jianshu.com/p/0042d8eb67c0 最近整理了一下原生与H5之间的交互方式,简单的做个总结.OC端与JS的交互,大致有这几种:拦截协议.JavaScriptCo ...
- WKWebView新特性及JS交互
引言 一直听说WKWebView比UIWebView强大许多,可是一直没有使用到,今天花了点时间看写了个例子,对其API的使用有所了解,为了日后能少走弯路,也为了让大家更容易学习上手,这里写下这篇文章 ...
- UIWebView和WKWebView的使用及js交互
UIWebView和WKWebView的使用及js交互 web页面和app直接的交互是很常见的东西,之前尝试过flex和js的相互调用以及android和js的相互调用,却只有ios没试过,据说比较复 ...
- WebView中Js与Android本地函数的相互调用
介绍 随着Html5的普及,html在表现力上不一定比原生应用差,并且有很强的扩展兼容性,所以越来越多的应用是采用Html与Android原生混合开发模式实现. 既然要实现混合开发,那么Js与Andr ...
- 在Ubuntu15.10中,使用wxPython的webview和JS进行交互
在Ubuntu下进行wxPython开发,因为需求,所以使用了wxPython的webview和JS的交互. 在Windows下,下图显示的代码可以正常的运行,但是在Ubuntu下进行开发,以下的代码 ...
- iOS webview注入JS
- (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *js = @"function imgAutoFit() { \ ...
随机推荐
- SDK提交到CocoaPods
一:GitHub新建仓库,并clone到本地 1.注册GitHub账号并登录 2.右上方点击+,新建仓库(仓库名字(Repository name).仓库权限(Public).readme.licen ...
- Beta 第四天
今天遇到的困难: 百度位置假死的问题研究发现并不是源于代码的问题,而是直接运行在主线程中会出现诸多问题 Fragment碎片刷新时总产生的固定位置的问题未果 今天完成的任务: 陈甘霖:修复了部分Bug ...
- 敏捷冲刺每日报告——Day4
1.情况简述 Alpha阶段第一次Scrum Meeting 敏捷开发起止时间 2017.10.28 00:00 -- 2017.10.29 00:00 讨论时间地点 2017.10.28晚9:30, ...
- Alpha冲刺Day1
项目Alpha冲刺Day1 一.站立式会议 照片: 今日安排: 今天是项目开始的第一天,我们小组一起开会讨论了一下具体每天代码进度的落实情况,做了一下大体的规划.另外准备搭建一下环境和项目部署. 二. ...
- electron-vue工程创建
没有vue创建经验请移步至 vue下载与安装 使用vue创建electron-vue工程 vue init simulatedgreg/electron-vue my-project 安装elemen ...
- C语言——第一次作业
**学习内容总结** 本周进行了算法的初步学习,用计算机的思维方式去思考问题,并学习了如何用传统程序框图表示算法. 相关内容: 1.算法是用来解决问题的方法与步骤. 2.计算机擅长重复,常用枚举的方法 ...
- mahony互补滤波器C编程
//gx...分别为重力加速度在三个轴向的分力 由加速度计测得 //ax...分别为角速度在三个轴向的角速度 由陀螺仪测得 //最后得到最终滤波完毕的x.y.z方向的角度值(°) void IMUup ...
- MSSQL 2000 错误823恢复
一.故障描述 MSSQL Server 2000 附加数据库错误823,附加数据库失败.数据库没有备份,不能通过备份恢复数据库,急需恢复数据库中的数据. 二.故障分析SQL Server数据库 823 ...
- style scoped
scoped: 只在父div和其内容内生效,
- MongoDb进阶实践之三 MongoDB查询命令详述
一.引言 上一篇文章我们已经介绍了MongoDB数据库的最基本操作,包括数据库的创建.使用和删除数据库,文档的操作也涉及到了文档的创建.删除.更新和查询,当然也包括集合的创建.重命 ...