iOS与JS交互之UIWebView协议拦截
级别:★★☆☆☆c
标签:「iOS与JS交互」「OC与JS交互」「UIWebView与JS交互」
作者: Xs·H
审校: QiShare团队
先解释下标题:“iOS与JS交互”。iOS指iOS
原生代码(文章只有OC
示例),JS指WEB
前端(不单指JavaScript
),交互指JS调用iOS
和iOS调用JS
。 通常情况下,iOS与JS可通过四种方式进行交互。作者将通过四篇文章逐一介绍。
本文介绍通过 UIWebView
协议拦截的方式实现iOS
与JS
交互。
一、JS调用iOS:
- 实现逻辑:点击JS的登录按钮,JS将登录成功后的token数据传递给iOS,iOS将收到的数据展示出来。
- 实现效果:
- JS代码:
//! 登录按钮
<button onclick = "login()" style = "font-size: 18px;">登录</button>
复制代码
//! 登录
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代码:
#pragma mark - UIWebViewDelegate//! UIWebView在每次加载请求前会调用此方法来确认是否加载此请求
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {if ([request.URL.scheme caseInsensitiveCompare:@"jsToOc"] == NSOrderedSame) {[self.class showAlertWithTitle:request.URL.host message:request.URL.query cancelHandler:nil];return NO;}return YES;
}
复制代码
- 实现原理:
1、JS与iOS约定好jsToOc
协议,用作JS在调用iOS时url的scheme
;
2、JS在登录成功后加载含有token数据的url:(jsToOc://loginSucceed?js_tokenString)
;
3、iOS的UIWebView在加载请求前都会调用-webView:shouldStartLoadWithRequest:navigationType:
方法来确认是否加载此请求;
4、iOS在此方法内截取jsToOc
协议获取JS传过来的数据,用UIAlertController
显示出来,并不允许加载此请求。
PS:除了显示截取到的数据,iOS还可以将
request.URL.host
看作JS想调用的方法名,将request.URL.query
看作该方法的参数集,从而体现出JS调用iOS
的概念。
二、iOS调用JS:
- 实现逻辑:点击iOS的登录按钮,iOS将登录成功后的token数据传递给JS,JS将收到的数据展示出来。
- 实现效果:
- iOS代码:
//! 登录按钮
UIBarButtonItem *loginBtnItem = [[UIBarButtonItem alloc] initWithTitle:@"登录" style:UIBarButtonItemStylePlain target:self action:@selector(login:)];
self.navigationItem.rightBarButtonItems = @[loginBtnItem];
复制代码
//! 登录方法
- (void)login:(id)sender {dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{NSString *jsString = [NSString stringWithFormat:@"ocToJs('loginSucceed', 'oc_tokenString')"];[self.webView stringByEvaluatingJavaScriptFromString:jsString];});
}
复制代码
- JS代码:
//! iOS调用JS入口
function ocToJs(action, params) {document.getElementById("returnValue").innerHTML = action + '?' + params;
}
复制代码
//! iOS调用JS数据显示框
<div id = "returnValue" style = "font-size: 18px; border: 1px dotted; height: 50px;"> </div>
复制代码
- 实现原理:
1、iOS使用UIWebView的-stringByEvaluatingJavaScriptFromString:
方法访问JS;
2、iOS与JS约定好ocToJs
方法,用作iOS在调用JS时的入口方法;
3、iOS在登录成功后以loginSucceed
和oc_tokenString
为参数访问ocToJs
方法;
4、JS在ocToJs
方法中将iOS传过来的数据显示在div
元素中。
PS:UIWebView的
-stringByEvaluatingJavaScriptFromString:
方法可以执行JavaScript代码。但只有在整个webView
加载完成之后-webViewDidFinishLoad:
调用此方法才会有响应。比如:我们可以通过如下方式获取JS的标题。
//! UIWebView在每次加载请求完成后会调用此方法
- (void)webViewDidFinishLoad:(UIWebView *)webView {self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
}
复制代码
可从Github获取工程源码
关注我们的途径有:
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)
推荐文章:
W3C规范标准化流程
糖是甜的,你也是: 致async
iOS与JS交互之UIWebView协议拦截相关推荐
- iOS与JS交互的4种方法
iOS与JS交互的方法: 1.拦截url(适用于UIWebView和WKWebView) 2.JavaScriptCore(只适用于UIWebView,iOS7+) 3.WKScriptMessage ...
- ios传值给js_深入剖析 iOS 与 JS 交互
前言 Web 页面中的 JS 与 iOS Native 如何交互是每个 iOS 猿必须掌握的技能.而说到 Native 与 JS 交互,就不得不提一嘴 Hybrid. Hybrid 的翻译结果并不是很 ...
- iOS与JS交互 JSCore
源起 随着互联网移动开发的热潮,web开发近几年也出现了许多移动开发框架,比如Rect native等许多,但是还是有一定的局限性,比如需要做一个端上 H5 照片上传功能,通过 JS 去实现往往效果会 ...
- iOS javascript js 交互
//JS里的一个回调.比如网页上的某个按钮点一下之后.JS会调用setKey这个方法. JSContext *context1 = [self.startView valueForKeyPath:@& ...
- iOS下JS与OC互相调用(一)--UIWebView 拦截URL
1.在JS 中做一次URL跳转,然后在OC中拦截跳转.(这里分为UIWebView 和 WKWebView两种,去年因为还要兼容iOS 6,所以没办法只能采用UIWebView来做.) 2.利用WKW ...
- IOS开发 - UIWebView(用法全面介绍,含最全的JS交互)
前两天我写了一套关于JS与OC交互的三种方法的文章,但是发现自己对UIWebView理解的还是比较浅,一直认为只能简单的当一个webView来使用,具体很多细节都忽略,如果想看我之前UIWebView ...
- iOS OC与JS交互(WebView监听事件)
在iOS应用的开发过程中,我们经常会使用到WebView,当我们对WebView进行操作的时候,有时会需要进行源生的操作.那么我记下来就与大家分享一下OC与JS交互. 首先先说第一种方法,并没有牵扯O ...
- iOS下JS和原生交互,函数互调
现在越来越多的APP都是H5和原生混合开发,这样确实方便快捷,但是H5的部分总避免不了很多与原生的交互,原生调JS函数还比较简单,原生的API函数stringByEvaluatingJavaScrip ...
- UIWebView和WKWebView的使用及js交互
web页面和app直接的交互是很常见的东西,之前尝试过flex和js的相互调用以及android和js的相互调用,却只有ios没试过,据说比较复杂.周末花了点时间研究了一下,确实和其他的不太一样,但是 ...
- iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge
WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...
最新文章
- 自创数据集,用TensorFlow预测股票教程 !(附代码)
- 斯坦福重磅报告:2030年的人工智能与生活
- cronolog apache 日志分割
- JDK 14的新特性:instanceof模式匹配
- oracle转sparksql工具化,不使用Sqoop流程,利用CacheManager直接完成SparkSQL数据流直接回写Oracle...
- TWaver With JavaFX
- 阿里云 linux 挂载数据盘
- ios block常见的错误(二)——循环引用
- linux修改jdk文件保存,Linux下更换jdk和配置环境变量详解
- linux虚拟机上挂载U盘
- 课程学习评价系统设计与实现
- C# 正则表达式大全
- 人工智能python营_AI人工智能训练营
- SPSS学习笔记(一)判断是否服从正态分布
- 神经网络 手写数字识别,人工智能手写数字识别
- win10显示rpc服务器不可用,win10系统RpC服务器不可用的详细办法
- Win10笔记本开启热点让手机上网
- mac android 模拟器启动,react-native使用脚本启动android模拟器(macos)
- SpringBoot小程序推送信息
- 住房公积金联名卡密码修改步骤