iOS与JS交互之UIWebView-协议阻拦

作者 : 开心源码 本文共3086个字,预计阅读时间需要8分钟 发布时间: 2022-05-12 共160人阅读

级别:★★☆☆☆
标签:「iOS与JS交互」「UIWebView与JS交互」「UIWebView阻拦协议」
作者: Xs·H
审校: QiShare团队

先解释下标题:“iOS与JS交互”。iOS指iOS原生代码(文章只有OC示例),JS指WEB前台(不单指JavaScript),交互指JS调使用iOSiOS调使用JS
作者将iOS与JS交互总结成了6种方式,并将逐一详情。目录如下:

  • iOS与JS交互之UIWebView-协议阻拦
  • iOS与JS交互之UIWebView-JavaScriptCore框架
  • iOS与JS交互之UIWebView-JSExport协议
  • iOS与JS交互之WKWebView-协议阻拦
  • iOS与JS交互之WKWebView-WKScriptMessageHandler协议
  • iOS与JS交互之WKWebView-WKUIDelegate协议

本文详情通过 UIWebView协议阻拦的方式实现iOSJS交互。

一、JS调使用iOS:
  • 实现逻辑:点击JS的登录按钮,JS将登录成功后的token数据传递给iOS,iOS将收到的数据展现出来。
  • 实现效果:

    JS调使用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);}//! 加载URLfunction 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) {        [UIWebViewInterceptController 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调使用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在登录成功后以loginSucceedoc_tokenString为参数访问ocToJs方法;
    4、JS在ocToJs方法中将iOS传过来的数据显示在div元素中。

PS:UIWebView的-stringByEvaluatingJavaScriptFromString:方法可以执行JS代码。但只有在整个webView加载完成之后调使用此方法才会有响应。比方:我们可以通过如下方式获取JS的标题。

//! UIWebView在每次加载请求完成后会调使用此方法- (void)webViewDidFinishLoad:(UIWebView *)webView {        self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];}

  • 可从QiShare的Github获取工程源码

续篇:iOS与JS交互之UIWebView-JavaScriptCore框架


关注我们的途径有:
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章:
W3C规范标准化流程
糖是甜的,你也是: 致 async

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » iOS与JS交互之UIWebView-协议阻拦

发表回复