个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
26
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章iOS和JS交互教程之WKWebView-协议拦截详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
前言 。
由于xcode8发布之后，编译器开始不支持ios 7了，这样我们的app也改为最低支持ios 8.0，既然需要与web交互，那自然也就选择使用了 ios 8.0之后 才推出的新控件 wkwebview. 。
相比与 uiwebview, wkwebview 存在很多优势:
先解释下标题：“ios与js交互”。ios指ios原生代码（文章只有oc示例），js指web前端（不单指javascript），交互指js调用ios和ios调用js.
本文介绍通过 wkwebview协议拦截的方式实现ios与js交互.
wkwebview是apple在ios8推出的webkit框架中的负责网页的渲染与展示的类，相比uiwebview速度更快，占用内存更少，支持更多的html特性.
1、js调用ios:
实现逻辑：点击js的登录按钮，js将登录成功后的token数据传递给ios，ios将收到的数据展示出来.
实现效果:
js调用ios实现效果 。
js代码:
|
1
2
|
//! 登录按钮
<button onclick =
"login()"
style =
"font-size: 18px;"
>登录</button>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//! 登录
function login() {
var token =
"js_tokenstring"
;
loginsucceed(token);
}
//! 登录成功
function loginsucceed(token) {
var action =
"loginsucceed"
;
jstooc(action, token);
}
//! js调用oc入口
function jstooc(action, params) {
var url =
"jstooc://"
+ action +
"?"
+ params;
loadurl(url);
}
//! 加载url
function loadurl(url) {
window.location.href = url;
}
|
ios代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#pragma mark - wknavigationdelegate
//! wkweview在每次加载请求前会调用此方法来确认是否进行请求跳转
- (
void
)webview:(wkwebview *)webview decidepolicyfornavigationaction:(wknavigationaction *)navigationaction decisionhandler:(
void
(^)(wknavigationactionpolicy))decisionhandler {
if
([navigationaction.request.url.scheme caseinsensitivecompare:@
"jstooc"
] == nsorderedsame) {
[wkwebviewinterceptcontroller showalertwithtitle:navigationaction.request.url.host message:navigationaction.request.url.query cancelhandler:nil];
decisionhandler(wknavigationactionpolicycancel);
}
else
{
decisionhandler(wknavigationactionpolicyallow);
}
}
|
实现原理:
1、js与ios约定好jstooc协议，用作js在调用ios时url的scheme； 。
2、js在登录成功后加载含有token数据的url： (jstooc://loginsucceed?js_tokenstring)； 。
3、ios的wkwebview在请求跳转前会调用-webview:decidepolicyfornavigationaction:decisionhandler:方法来确认是否允许跳转； 。
4、ios在此方法内截取jstooc协议获取js传过来的数据，用uialertcontroller显示出来，并通过decisionhandler不允许此请求跳转.
ps1：除了显示截取到的数据，ios还可以将navigationaction.request.url.host看作js想调用的方法名，将navigationaction.request.url.query看作该方法的参数集，从而体现出js调用ios的概念。 ps2：在-webview:decidepolicyfornavigationaction:decisionhandler:方法中一定要调用decisionhandler回调来制定允许请求跳转wknavigationactionpolicyallow或者不允许跳转wknavigationactionpolicyallow，不然会崩溃.
2、ios调用js:
实现逻辑：点击ios的登录按钮，ios将登录成功后的token数据传递给js，js将收到的数据展示出来.
实现效果:
ios调用js实现效果 。
ios代码:
|
1
2
3
|
//! 登录按钮
uibarbuttonitem *loginbtnitem = [[uibarbuttonitem alloc] initwithtitle:@
"登录"
style:uibarbuttonitemstyleplain target:self action:@selector(login:)];
self.navigationitem.rightbarbuttonitems = @[loginbtnitem];
|
|
1
2
3
4
5
6
7
|
//! 登录方法
- (
void
)login:(id)sender {
dispatch_after(dispatch_time(dispatch_time_now, (int64_t)(0.5 * nsec_per_sec)), dispatch_get_main_queue(), ^{
[self.webview evaluatejavascript:@
"octojs('loginsucceed', 'oc_tokenstring')"
completionhandler:^(id response, nserror *error) {}];
});
}
|
js代码:
|
1
2
3
4
|
//! ios调用js入口
function octojs(action, params) {
document.getelementbyid(
"returnvalue"
).innerhtml = action +
'?'
+ params;
}
|
|
1
2
|
//! ios调用js数据显示框
<
div
id =
"returnvalue"
style =
"font-size: 18px; border: 1px dotted; height: 50px;"
> </
div
>
|
实现原理:
1、ios与js约定好octojs方法，用作ios在调用js时的入口方法； 。
2、ios在登录成功后以loginsucceed和oc_tokenstring为参数拼接js代码octojs('loginsucceed', 'oc_tokenstring'),
3、ios使用wkwebview的-evaluatejavascript:completionhandler:方法执行拼接好的js代码； 。
3、js在octojs方法中将ios传过来的数据显示在div元素中； 。
4、ios通过completionhandler收到js中octojs方法的回调.
ps：wkwebview的-evaluatejavascript:completionhandler:方法可以执行js代码。但只有在整个webview加载完成之后调用此方法才会有响应。比如：我们可以通过如下方式获取js的标题.
|
1
2
3
4
5
6
7
|
//! wkwebview在每次加载请求完成后会调用此方法
- (
void
)webview:(wkwebview *)webview didfinishnavigation:(wknavigation *)navigation {
[webview evaluatejavascript:@
"document.title"
completionhandler:^(nsstring *title, nserror *error) {
self.title = title;
}];
}
|
可从qishare的github获取工程源码 。
总结 。
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我的支持.
原文链接：https://www.jianshu.com/p/e23aa25d7514 。
最后此篇关于iOS和JS交互教程之WKWebView-协议拦截详解的文章就讲到这里了,如果你想了解更多关于iOS和JS交互教程之WKWebView-协议拦截详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
26
4
0
在 python 交互中，有没有办法在每次输入命令后自动从 python 文件执行方法？ 例如:如果我有一个打印文件信息的方法，但我不想不断调用该方法，我怎样才能让它在 python 交互中的每个命令
当你使用Edge等浏览器或系统软件播放媒体时，Windows控制中心就会出现相应的媒体信息以及控制播放的功能，如图。 SMTC (SystemMedia
我在主菜单上使用标准的剪切，复制，粘贴操作。它们具有快捷键Ctrl-X，Ctrl-C和Ctrl-V。 当我打开模态表单时FindFilesForm.ShowModal，然后所有快捷方式都可以从表单中使
这是我想要实现的目标:打开一个 shell(korn 或 bash，没关系)，从那个 shell，我想打开一个 ssh 连接(ssh user@host)。在某些时候，可能会提示我输入密码，或者可能会
我正在测试在C / C++程序中嵌入Python，但是我缺乏理解。 测试程序很简单: 初始化解释器； 从启动Timer的文件中执行python脚本(每0.1秒增加一个变量)； 等待5秒(C++); 从
我正在尝试用java创建Excel文件。现在，我正在使用 Apache POI 库创建文件并将其保存到本地驱动器。有没有办法启动 Excel 并填充数据而不将其保存到硬盘驱动器？ 最佳答案 考虑 Do
我有一个黑盒函数，它接受大约 10 个整数输入。该函数返回一个 pandas 数据框，我想捕获输出窗口(通过使用 bbwidget.children)并显示在布局中的其他地方。到目前为止，交互/交互似
我正在体验新的 QQuickWidget。我如何在 QQuickWidget 和 C++ 之间进行交互？ C++ QQuickWidget *view = new QQuickWidget(); vi
我正在尝试设置一个使用 TWAIN 的 C# 应用程序 example from code project 除了我需要将 Form 转换为 IMessageFilter 和调用 IMessageFil
我想在使用 redis 的 python 中编写应用程序。我用谷歌搜索，但找不到我的问题的任何结果。通常，我这样做: import redis rs = redis.Redis('localhost'
最近做一个小项目，网页中嵌入google maps，输入经纬度坐标可以定位地图位置并加注标记，点击标记获取远端摄像头数据并在视频窗口实现播放。在实际操作过程中，由于经纬度数据和视频登录的用户名密码数
我需要在这里澄清一些事情: 我有一个网站，每次在浏览器中重新加载网站时都会更新两个变量的值。这个页面显然是一个 HTML 页面，但变量是由 javascript 函数更新的。此页面在我的服务器上运行。
我注意到，auto忽略双条件。这是一个简化的示例: Parameter A B : Prop. Parameter A_iff_B : A B. Theorem foo1: A -> B. Proo
使用 interactive使用多个小部件相当简单，例如: interactive(foo, w1=widget1, w2=widget2, ...) 但是，我想使用 VBox 和 HBox 的组合以
我们提供类似于 imagemagick 的浏览器页面 JavaScript，可帮助人们将图像转换为不同大小和格式。但是，它需要网页交互。 是否可以让人们自动进行这种交互——无需将图像发送到我们的服务器
大家好，我正在尝试制作一个具有大量动画和效果的交互式 UI。 但我不知道是否: 核心图形可以支持用户交互(触摸、拖动等) 核心图形支持对象旋转 核心图形可以以任何方式与 UIKit 和核心动画交互 谢
这是获取维基百科上一篇关于高盛的文章的介绍的链接。 http://en.wikipedia.org/w/api.php?action=query&prop=extracts&titles=Goldma
我正在尝试编写一个 AppleScript 来查询 iCal 并在任何日历中查找给定日期的所有事件。 我首先编写了一个简单的脚本，它对给定日历中的每个事件执行一些简单的操作: tell applica
我在我的 hudson 服务器上使用 jira 插件。将代码提交到 svn 时，我的提交注释包含在我的 jira 问题中，但有什么办法可以将注释归因于执行提交的实际人员，而不是让一个全局 jira 用
我正在播放一段视频来装饰我的用户界面。我隐藏了 AV 播放器控件，但用户仍然可以控制视频。例如，他们可以使用滑动手势快进或快退。 这让我特别惊讶，因为 AVPlayerView 上面有一个覆盖 Vie
我是一名优秀的程序员,十分优秀！