扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下iOS和JS交互教程之WKWebView-协议拦截的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
专业从事网站设计制作、成都做网站,高端网站制作设计,微信小程序,网站推广的成都做网站的公司。优秀技术团队竭力真诚服务,采用html5+CSS3前端渲染技术,响应式网站建设,让网站在手机、平板、PC、微信下都能呈现。建站过程建立专项小组,与您实时在线互动,随时提供解决方案,畅聊想法和感受。相比与 UIWebView, WKWebView 存在很多优势:
支持更多的HTML5的特性
高达60fps滚动刷新频率与内置手势
与Safari相容的JavaScript引擎
在性能、稳定性方面有很大提升占用内存更少 协议方法及功能都更细致
可获取加载进度等。
先解释下标题:“iOS与JS交互”。iOS指iOS原生代码(文章只有OC示例),JS指WEB前端(不单指JavaScript),交互指JS调用iOS和iOS调用JS。
本文介绍通过 WKWebView协议拦截的方式实现iOS与JS交互。
WKWebView是Apple在iOS8推出的Webkit框架中的负责网页的渲染与展示的类,相比UIWebView速度更快,占用内存更少,支持更多的HTML特性。
一、JS调用iOS:
实现逻辑:点击JS的登录按钮,JS将登录成功后的token数据传递给iOS,iOS将收到的数据展示出来。
实现效果:
JS调用iOS实现效果
JS代码:
//! 登录按钮
//! 登录 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 - 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,不然会崩溃。
二、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(), ^{ [self.webView evaluateJavaScript:@"ocToJs('loginSucceed', 'oc_tokenString')" completionHandler:^(id response, NSError *error) {}]; }); }
JS代码:
//! iOS调用JS入口 function ocToJs(action, params) { document.getElementById("returnValue").innerHTML = action + '?' + params; }
//! iOS调用JS数据显示框
实现原理:
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的标题。
//! WKWebView在每次加载请求完成后会调用此方法 - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation { [webView evaluateJavaScript:@"document.title" completionHandler:^(NSString *title, NSError *error) { self.title = title; }]; }
以上是“iOS和JS交互教程之WKWebView-协议拦截的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流