iOS与H5交互(WKWbebView)

前言:

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

创建WKWebView:

遵守协议

-(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;

}

顶部网页加载进度条:

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];//进度监听

#pragma mark 加载进度监听

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)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事件监控:

-(void)viewWillAppear:(BOOL)animated

{

[super viewWillAppear:animated];

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

}

移除JS事件监控:

-(void)viewWillDisappear:(BOOL)animated

{

[super viewWillDisappear:animated];

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

}

监听方法:

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

{

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

        }

}

你可能感兴趣的:(iOS与H5交互(WKWbebView))