WKWebView与JS的交互
转载：https://www.jianshu.com/p/253e76a74b38
用普通的UIWebView和JS交互 大概核心代码是这样的
- (void)setupWebView{
self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
self.webView.delegate = self;
NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL* url = [NSURL fileURLWithPath:path];
NSURLRequest* request = [NSURLRequest requestWithURL:url] ;
[self.webView loadRequest:request];
[self.view addSubview:self.webView];
}
代理方法
- (void)webViewDidFinishLoad:(UIWebView *)webView {
//获取js上下文
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//注入JS对象名称 "JSObjec"
self.jsContext[@"JSObjec"] = self;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
}
想调用的OC方法
- (void)getCall:(NSString *)callString{
NSLog(@"Get----:%@", callString);
//此处填写相应的逻辑代码
}
然后JS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="margin-top: 20px">
<h2>JS与OC交互</h2>
<input type="button" value="唤起本地方法(call)" onclick="JSObjec.call()">
</div>
<script>
var call = function()
{
var callInfo = JSON.stringify("www.jianshu.com");//此处参数可自定义
JSObjec.getCall(callInfo);
}
</script>
</body>
</html>
接下来是WKWebView的核心代码
需要导入头文件 代理
#import <WebKit/WebKit.h>
#import <JavaScriptCore/JavaScriptCore.h>
@interface ViewController ()<WKNavigationDelegate,WKScriptMessageHandler>
@property (nonatomic,strong) WKWebView *webView;
- (void)setupWKWebView{
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
// 设置偏好设置
config.preferences = [[WKPreferences alloc] init];
// 默认为0
config.preferences.minimumFontSize = 10;
// 默认认为YES
config.preferences.javaScriptEnabled = YES;
// 在iOS上默认为NO，表示不能自动通过窗口打开
config.preferences.javaScriptCanOpenWindowsAutomatically = NO;
config.processPool = [[WKProcessPool alloc] init];
config.userContentController = [[WKUserContentController alloc] init];
//注意在这里注入JS对象名称 "JSObjec"
[config.userContentController addScriptMessageHandler:self name:@"JSObjec"];
self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
self.webView.navigationDelegate = self;
[self.view addSubview:self.webView];
NSURL *path = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
[self.webView loadRequest:[NSURLRequest requestWithURL:path]];
}
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
NSLog(@"%@",message.body);//message.body这里面内容是js里传过来的参数
//message.name这个是注入的JS对象名称 "JSObjec"
if ([message.name isEqualToString:@"JSObjec"]) {
// 打印所传过来的参数，只支持NSNumber, NSString, NSDate, NSArray,
// NSDictionary, and NSNull类型
// 此处填写相应的逻辑代码
}
}
然后JS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="margin-top: 20px">
<h2>JS与OC交互</h2>
<input type="button" value="唤起本地方法(call)" onclick="JSObjec.call()">
</div>
<script>
var call = function()
{
var callInfo = JSON.stringify("www.jianshu.com");//此处参数可自定义
//这里的内容差不多全部一样 只是调用的方法有区别 一定要注意区分
//这个是用UIWebView时调用的方法 JSObjec.getCall(callInfo);
//下面是用WKWebView调用的方法
window.webkit.messageHandlers.JSObjec.postMessage(callInfo);
}
</script>
</body>
</html>
好了 希望这篇总结能帮助到大家。
后续补充
//从OC中获取到一些数据后存入JS
NSString *sendToken = [NSString stringWithFormat:@"localStorage.setItem(\"accessToken\",'%@');",SecurityToken];
//WKUserScriptInjectionTimeAtDocumentStart JS加载前执行
//WKUserScriptInjectionTimeAtDocumentEnd JS加载后执行
//injectionTime配置不要写错 forMainFrameOnly NO(全局窗口) YES(只限主窗口)
WKUserScript *sendTokenScript = [[WKUserScript alloc]initWithSource:sendToken injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
//注入JS
[config.userContentController addUserScript:sendTokenScript];作者：波妞和酱豆子
链接：https://www.jianshu.com/p/253e76a74b38
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
WKWebView与JS的交互的更多相关文章
- 【Swift】WKWebView与JS的交互使用
一.前言 近日,有朋友问我关于WKWebView与JS的交互问题,可我之前一直使用的是UIWebView,也不曾做过WKWebView的交互啊!接下来大家一块学习下WKWebView是怎么实现原生代码 ...
- iOS WKWebView与JS的交互
参考链接:https://www.jianshu.com/p/524bc8699ac2
- ios WKWebView 与 JS 交互实战技巧
一.WKWebView 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新 ...
- WKWebView与JS交互，UIWebView+JavascriptCore和JS交互
最近一直在做有关Swift和JavaScript交互的程序,所以有关UIWebView和WKWebView在使用上的差别在此总结下: UIWebView: (1)创建 var webView: UIW ...
- OC与JS的交互（iOS与H5混编）
大神总结WKWebView的坑:https://mp.weixin.qq.com/s/rhYKLIbXOsUJC_n6dt9UfA 在开发过程中,经常会出现需要iOS移动端与H5混编的使用场景. iO ...
- iOS与JS开发交互总结
hybrid.jpg 前言 Web 页面中的 JS 与 iOS Native 如何交互是每个 iOS 猿必须掌握的技能.而说到 Native 与 JS 交互,就不得不提一嘴 Hybrid. Hybri ...
- iOS中web与Js的交互
问题 感觉到uni-app框架有pit,公司强推该框架的小哥识趣的闭嘴,考虑到全盘替换周期跟成本挺大,基于uni-app能打包成H5,采用webview+js的原生方式集成 基本结构:原生壳 + we ...
- android 从 phonegap 到 js webview 交互
像生活类.办公协同类. 动态添加,下载等. 1.phonegap 我这里用了旧的版本,可能新版本变化大了. 创建asset资源文件夹,然后新建index.html copy 相应的js 文件进来. 创 ...
- [转]OC与JS的交互详解
事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS ...
- Android与H5交互（java与js的交互）
一.理论概述 1.js调用java方法 直接调用WebView的该方法就可以添加接口了,不过先要启动交互 // 启用javascript mWebView.getSettings().setJavaS ...
随机推荐
- Hadoop批处理方案 和 MPP架构方案 作为数据仓库的区别
1,原理对比 MPP方案中的数据通常在节点之间拆分(分片),每个节点仅处理其本地数据.而且,每家都有专门为 MPP 解决方案开发的复杂而成熟的 SQL 优化器.它们都可以在内置语言和围绕这些解决方案的 ...
- 性能测试-top-实时显示系统中各个进程的资源占用状况， 也可以查看线程
1.top命令介绍 top命令是Linux系统中常用的性能分析工具,可以实时地查看系统的运行情况,比如内存.CPU.负载以及各个进程的资源占用情况 top界面主要分为两个部分,前5行展示的是系统的整体 ...
- 【当年笔记】集合之Queue队列
1)Queue 分类 双端队列:双端队列(Deque)是 Queue 的子类也是 Queue 的补充类,头部和尾部都支持元素插入和获取. 阻塞队列:阻塞队列指的是指添加或删除元素时,如果没有成功,会阻 ...
- linux下influx客户端使用
influxdb-client 通过 sudo apt-cache search influx 找到了一个客户端工具 influxdb-client - command line interface ...
- Qt 字符串相等判断问题
QString str = "0"; if (QString(param.value.data()) == QStringLiteral("空")) { str ...
- C语言学习记录（二）
C语言学习记录(二) 一.知识要点(C语言概述) 1.C语言的发展历史和特点 C语言的发展历史 C语言最早在B语言的基础上开发出来,并于1972年在一台计算机上首次实现. C语言最开始只是为描述和实现 ...
- a[i]之和小于N的含义
例题 小白月赛 困难卷积 题目 要求一个暴力算是 \(O(n^2)\) 的东西 同时题目保证 \(\sum a[i] \leq 10^7\) 题解 \(\sum a[i] \leq 10^7\) 的含 ...
- SqlServer的主键和外键
SqlServer在创建表时要有 完整性约束(主键)和参照性约束(外键) 1.在建表时创建主键 第一种方法: 第二种方法: 联合主键,即2个主键,sid和cid 2.如果表已经存在,需要创建主键 外键
- JVM系列（四）：GC策略
一.概念 GC,Garbage Collection垃圾回收,主要针对JVM中的堆和方法区,而JVM栈.本地方法栈,程序计数器都是线程私有的,跟随线程生命周期. 二.对象存活判断 1. 引用计数:每个 ...
- CAD怎么删除图块注释？删除CAD图块注释步骤
CAD设计过程中,有时候会在图纸中添加许多注释,如:文字注释,图块注释,标注样式注释等.当需要删除图纸中的CAD图块注释时,你知道该如何操作吗?本节课程小编就来给大家分享一下浩辰CAD软件中删除CAD ...