iOS与H5交互（WKWbebView）

前言：

在iOS开发中，或多或少的会嵌入一些H5页面，有时候需要原生代码和H5页面进行交互。iOS8开始苹果推出性能更强大的WKWebView,所以一下方法是关于WKWebView与JS的交互。

创建WKWebView:

遵守协议

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #703daa; background-color: #ffffff}
span.s1 {color: #000000}

<WKNavigationDelegate, WKUIDelegate, WKScriptMessageHandler>

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #000000; background-color: #ffffff}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #4f8187; background-color: #ffffff}
p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #78492a; background-color: #ffffff}
p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #703daa; background-color: #ffffff}
span.s1 {color: #703daa}
span.s2 {color: #000000}
span.s3 {color: #ba2da2}
span.s4 {color: #4f8187}
span.s5 {color: #3e1e81}
span.s6 {color: #272ad8}

-(WKWebView *)wkwebview

{

if (!_wkwebview) {

_wkwebview = [[WKWebView alloc] initWithFrame:CGRectMake(0, HeightSignal, ScreenWidth, ScreenHeight-HeightSignal-HeightBottomSafe)];

_wkwebview.scrollView.backgroundColor = [UIColor whiteColor];

_wkwebview.navigationDelegate = self;

_wkwebview.UIDelegate = self;

[self.view addSubview:_wkwebview];

}

return _wkwebview;

}

顶部网页加载进度条:

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #3e1e81; background-color: #ffffff}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #703daa; background-color: #ffffff}
p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #008400; background-color: #ffffff}
p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #4f8187; background-color: #ffffff}
span.s1 {color: #ba2da2}
span.s2 {color: #000000}
span.s3 {color: #4f8187}
span.s4 {color: #703daa}
span.s5 {color: #272ad8}
span.s6 {color: #78492a}
span.s7 {color: #3e1e81}
span.s8 {color: #d12f1b}
span.s9 {color: #008400}

self.progressView = [[UIProgressView alloc] initWithFrame:CGRectMake(0, HeightSignal, [[UIScreen mainScreen] bounds].size.width, 2)];

self.progressView.backgroundColor = [UIColor blueColor];

//设置进度条的高度，下面这句代码表示进度条的宽度变为原来的1倍，高度变为原来的1.5倍.

self.progressView.transform = CGAffineTransformMakeScale(1.0f, 1.5f);

[self.view addSubview:self.progressView];

[self.wkwebview addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];//进度监听

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #78492a; background-color: #ffffff}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #000000; background-color: #ffffff}
p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #d12f1b; background-color: #ffffff}
p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #703daa; background-color: #ffffff}
p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #008400; background-color: #ffffff}
p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #3e1e81; background-color: #ffffff}
p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #000000; background-color: #ffffff; min-height: 11.0px}
span.s1 {color: #ba2da2}
span.s2 {color: #703daa}
span.s3 {color: #000000}
span.s4 {color: #3e1e81}
span.s5 {color: #4f8187}
span.s6 {color: #272ad8}
span.s7 {color: #008400}

#pragma mark 加载进度监听

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {

if ([keyPath isEqualToString:@"estimatedProgress"]) {

self.progressView.progress = self.wkwebview.estimatedProgress;

if (self.progressView.progress == 1) {

/*

*添加一个简单的动画，将progressView的Height变为1.4倍，在开始加载网页的代理中会恢复为1.5倍

*动画时长0.25s，延时0.3s后开始动画

*动画结束后将progressView隐藏

*/

__weak typeof (self)weakSelf = self;

[UIView animateWithDuration:0.25f delay:0.3f options:UIViewAnimationOptionCurveEaseOut animations:^{

weakSelf.progressView.transform = CGAffineTransformMakeScale(1.0f, 1.4f);

} completion:^(BOOL finished) {

weakSelf.progressView.hidden = YES;

}];

}

}else{

[super observeValueForKeyPath:keyPath ofObject:object change:change context:context];

}

}

添加JS事件监控：

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #000000; background-color: #ffffff}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #703daa; background-color: #ffffff}
p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #31595d; background-color: #ffffff}
span.s1 {color: #ba2da2}
span.s2 {color: #3e1e81}
span.s3 {color: #000000}
span.s4 {color: #4f8187}
span.s5 {color: #d12f1b}
span.s6 {color: #008400}

-(void)viewWillAppear:(BOOL)animated

{

[super viewWillAppear:animated];

[self.wkwebview.configuration.userContentController addScriptMessageHandler:self name:@"share"];//分享

}

移除JS事件监控：

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #000000; background-color: #ffffff}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #3e1e81; background-color: #ffffff}
p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #703daa; background-color: #ffffff}
p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #31595d; background-color: #ffffff}
span.s1 {color: #ba2da2}
span.s2 {color: #000000}
span.s3 {color: #4f8187}
span.s4 {color: #3e1e81}
span.s5 {color: #d12f1b}
span.s6 {color: #008400}

-(void)viewWillDisappear:(BOOL)animated

{

[super viewWillDisappear:animated];

[self.wkwebview.configuration.userContentController removeScriptMessageHandlerForName:@"share"];//分享

}

监听方法：

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #78492a; background-color: #ffffff}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Menlo; color: #000000; background-color: #ffffff}
span.s1 {color: #ba2da2}
span.s2 {color: #703daa}
span.s3 {color: #3e1e81}
span.s4 {color: #d12f1b}
span.s5 {color: #008400}
span.s6 {color: #31595d}

-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message

{

if ([message.name isEqualToString:@"share"]) {

}

}