IOS中UIWebView、WKWebView之JS交互
做客户端开发，肯定避免不了JS交互，于是自己对苹果接口做了个简易封装：
JSExport-->UIWebView+Interaction、WKScriptMessageHandler -->WKWebView+Interaction以备以后使用。
代码非常简洁，见这里：https://github.com/V5zhou/JSInteraction.git
旧方式
旧的交互方式有通过UIWebViewDelegate实现的：JS与客户端定义好跳转页面参数，在将要跳转时捕获关键字，然后处理业务。
iOS端：
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSString *urlString = [[request URL] absoluteString];
if ([urlString isEqualToString:@"objc://loading"]) {
if (_gotoRootViewController) {
_gotoRootViewController();
}
}
return YES;
}
JS端：
<!DOCTYPE html>
<html>
<title>test</title>
<meta charset="utf-8">
<body>
<a href="javascript:document.location = 'objc://loading'" rel="external nofollow" class="btn">这是交互按钮</a>
</body>
</html>
UIWebView+JSExport方式
导入JavaScriptCore.framework，并导入我的扩展类#import "UIWebView+Interaction.h"。
使用方式
OC调JS：
[_webView InterActionToJs:@"alertMobile('15625298071')"];
JS调OC:
- (void)webViewDidFinishLoad:(UIWebView *)webView {
[self.webView InterActionToOc:^(InterActionOcType functionType, NSDictionary *param) {
switch (functionType) {
case InterActionOcType_alert:
{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:param[@"title"] message:param[@"content"] delegate:nil cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
[alert show];
}
break;
case InterActionOcType_present:
{
self.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
Class Cls = NSClassFromString(param[@"toController"]);
BOOL isAnimate = [param[@"animate"] boolValue];
UIViewController *ctl = [[Cls alloc] init];
[self presentViewController:ctl animated:isAnimate completion:nil];
}
break;
default:
break;
}
}];
}
添加动作
//自定义添加功能类型
typedef NS_ENUM(NSUInteger, InterActionOcType) {
InterActionOcType_alert = 0,
InterActionOcType_present,
InterActionOcType_xxxxxxx, //有啥需求就和这里添加
};
并且对应的html中添加JS,参数封装为字典形式。例：
function myPresent(ctl) {
var param = new Array();
param["animate"] = 1;
param["toController"] = "SecondViewController";
WebViewInteraction.callBack(1, param);
}
其中callBack是通过这个JSExport实现的
@protocol WebViewJSExport <JSExport> JSExportAs (callBack /** callBack 作为js方法的别名 */, - (void)awakeOC:(InterActionOcType)type param:(NSDictionary *)param ); @end
WKWebView+WKScriptMessageHandler方式
导入WebKit.framework，并导入我的扩展类#import "WKWebView+Interaction.h"。
使用方式
OC调JS：
[self.wkWebView InterActionToJs:@"JSReloadTitle('你点了刷新JS按钮，我没猜错！')"];
JS调OC:
//注册交互类型
[self.wkWebView registerScriptTypes:@{@"OCDismiss" : @(WKInterActionOcType_dismiss),
@"OCShowAlert" : @(WKInterActionOcType_alert)}];
[self.wkWebView InterActionToOc:^(WKInterActionOcType functionType, NSDictionary *param) {
switch (functionType) {
case WKInterActionOcType_dismiss:
{
BOOL isAnimate = [param[@"animate"] boolValue];
[self dismissViewControllerAnimated:isAnimate completion:nil];
}
break;
case WKInterActionOcType_alert:
{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"JS去做平方" message:nil delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
alert.alertViewStyle = UIAlertViewStylePlainTextInput;
[alert show];
}
break;
default:
break;
}
}];
添加动作
//自定义添加功能类型
typedef NS_ENUM(NSUInteger, WKInterActionOcType) {
WKInterActionOcType_alert = 0,
WKInterActionOcType_dismiss,
WKInterActionOcType_xxxxxxx, //有啥需求就和这里添加
};
并且对应的html中添加JS,参数封装为字典形式。例：
//js调oc
function myDismiss() {
window.webkit.messageHandlers.OCDismiss.postMessage({"animate" : 1}); //这里的OCDismiss对应注册类型
}
其中callBack是通过WKScriptMessageHandler实现的
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
dispatch_async(dispatch_get_main_queue(), ^{
NSString *name = message.name;
NSDictionary *value = message.body;
WKInterActionOcType type = [self.typeDict[name] integerValue];
if (self.block) {
self.block(type, value);
}
});
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
iOS CAEmitterLayer实现粒子发射动画效果
iOS实现粒子发射动画效果图 代码已上传 GitHub:https://github.com/Silence-GitHub/CoreAnimationDemo 动画效果用 CAEmitterLayer 实现.CAEmitterLayer 显示粒子发射动画,具体的粒子由 CAEmitterCell 封装.代码示例是展示 CAEmitterLayer 如何使用.为了方便,直接在控制器(UIViewController)中设置 CAEmitterLayer.如果在项目中使用,有时在自定义视图(UIVi
-
IOS打开照相机与本地相册选择图片实例详解
IOS打开照相机与本地相册选择图片 最近正好项目里面要集成"打开照相机与本地相册选择图片"的功能,今天就在这边给大家写一个演示程序:打开相机拍摄后或者在相册中选择一张照片,然后将它显示在界面上.好了废话不多说,因为比较简单直接上源码. 首先,我们在头文件中添加需要用到的actionSheet控件,显示图片的UIImageView控件,并且加上所需要的协议 #import <UIKit/UIKit.h> @interface ImagePickerViewController
-
iOS实现自定义起始时间选择器视图
随着界面的整体效果的各种展现, 起始时间选择器的展现也需求突出! 最近项目中发现时间选择器使用处还挺多, 数了数原型图发现有6处. 便决定自定义时间选择器视图写个 Demo, 封装好在所需控制器里直接调用! 主要功能: 调起时间选择器, 传值(起始时间/截止时间), 两者时间均要合理, 不能超过未来时间, 并且起始时间不能大于截止时间. 点击取消或空白处收起时间选择器. 如果需要可以根据自己的需求来修改界面, 效果如下: 主要步骤: 创建时间选择器Picker 且确认取消按钮实现功能逻辑 创建展
-
iOS中 UIActionSheet字体的修改
一,效果图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController <UIActionSheetDelegate> @end RootViewController.m -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UIActionSheet *actio
-
IOS 获取网络图片大小实例详解
IOS 获取网络图片大小实例详解 在iOS开发过程中经常需要通过网络请求加载图片,有时,需要在创建UIImageView或UIButton来显示图片之前需要提前知道图片的尺寸,根据图片尺寸创建对应大小的控件.但是对于网络图片来说,要想通过最优的方法获得尺寸就略微有点困难,大体思路就是下面这种: 如果有使用SDWebImage,则首先检查是否缓存过该图片,如果没有,先通过文件头获取图片大小(针对格式为png.gif.jpg文件获取其尺寸大小),如果获取失败,则下载完整的图片data,然后计算大小,
-
IOS中UIWebView、WKWebView之JS交互
做客户端开发,肯定避免不了JS交互,于是自己对苹果接口做了个简易封装: JSExport-->UIWebView+Interaction.WKScriptMessageHandler -->WKWebView+Interaction以备以后使用. 代码非常简洁,见这里:https://github.com/V5zhou/JSInteraction.git 旧方式 旧的交互方式有通过UIWebViewDelegate实现的:JS与客户端定义好跳转页面参数,在将要跳转时捕获关键字,然后处理业务.
-
iOS中UIWebView网页加载组件的基础及使用技巧实例
基本用法示例 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. UIWebView * webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 20, ScreenWidth, ScreenHeight-20)]; // 自动队页面进行缩放以适应屏幕 webView.scalesPageToFit = Y
-
IOS中UIWebView加载Loading的实现方法
第一种方法:使用UIView and UIActivityIndicatorView 复制代码 代码如下: //创建UIWebView WebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 44, 320, 400)]; [WebView setUserInteractionEnabled:NO]; [WebView setBackgroundColor:[UIColor clearColor]]; [WebView setDelega
-
IOS中UIWebView的使用详解
一.初始化与三种加载方式 UIWebView继承与UIView,因此,其初始化方法和一般的view一样,通过alloc和init进行初始化,其加载数据的方式有三种: 第一种: - (void)loadRequest:(NSURLRequest *)request; 这是加载网页最常用的一种方式,通过一个网页URL来进行加载,这个URL可以是远程的也可以是本地的,例如我加载百度的主页: UIWebView * view = [[UIWebView alloc]initWithFrame:self.
-
IOS之UIWebView的使用(基本知识)
刚接触IOS开发1年多,现在对于混合式移动端开发越来越流行,因为开发成本上.速度上都比传统的APP开发要好,混合式开发是传统模式与PC网页端相结合的模式.那么提到了 APP的混合模式开发,在Android开发中有WebView作为混合模式开发的桥梁,当然在IOS中也同样有一个 UIWebView 组件来作为混合模式开发的桥梁,那么下面就对UIWebView的一些基本知识详解一下. 一.UIWebView的基础使用 1.创建UIWebView: CGRect bouds = [[UIScreen
-
iOS开发教程之WKWebView与JS的交互
前言 iOS8以后,Apple公司推出了WKWebView,对比之前的UIWebView不论是处理速度还是内存性能,都有了大幅度的提升! 那么下面我就分享一下WKWebView与JS的交互. 首先使用WKWebView.你需要导入WebKit #import 然后初始化一个WKWebView,设置代理,并且执行代理的方法.在网页加载成功的时候,我们会调用一些JS代码对网页进行设置. WKWebView的代理一共有三个:WKUIDelegate,WKNavigationDelegate,WKScr
-
JS交互点击WKWebView中的图片实现预览效果
Swift 4.0 WKWebView 1.注入js代码 (重点) func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { let jsGetImages = "function getImages(){" + "var objs = document.getElementsByTagName(\"img\");" + "var imgScr =
-
iOS中WKWebView白屏问题的分析与解决
前言 随着WKWebView的推出, 解决了很多UIWebView 的问题.比如加载速度慢,内存泄露等问题.WKWebView是在iOS 8 推出,前段时间正好把项目也适配到iOS 8 以上了,终于可以把项目中的UIWebView 替换成WKWebView. WKWebView的特点: 性能高,稳定性好,占用的内存比较小, 支持JS交互 支持HTML5 新特性 可以添加进度条(然并卵,不好用,还是习惯第三方的). 支持内建手势, 据说高达60fps的刷新频率(不卡) 但是发现在使用的时候还是有很
-
iOS和JS交互教程之WKWebView-协议拦截详解
前言 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新控件 WKWebView. 相比与 UIWebView, WKWebView 存在很多优势: 支持更多的HTML5的特性 高达60fps滚动刷新频率与内置手势 与Safari相容的JavaScript引擎 在性能.稳定性方面有很大提升占用内存更少 协议方法及功能都更细致 可获取加载进度等. 先解释下标题:"iOS与J
-
IOS与网页JS交互详解及实例
IOS与网页JS交互 随着移动APP的快速迭代开发趋势,越来越多的APP中嵌入了html网页,但在一些大中型APP中,尤其是电商类APP,html页面已经不仅仅满足展示功能,这时html要求能与原生语言进行交互.相互传值.比如携程APP中一个热门景点的网页中,点击某个景点,可以跳转到原生中的该景点详情页控制器. 为此,我整理了三种最常用最便捷有效的OC与JS交互的方式,供大家学习交流. 第一种:JS给OC传值. 1. 技术方案:使用JavaScriptCore.framework框架 2. 使