前言： 在iOS開發中，或多或少的會嵌入一些H5頁面，有時候需要原生代碼和H5頁面進行交互。iOS8開始蘋果推出性能更強大的WKWebView,所以一下方法是關於WKWebView與JS的交互。 創建WKWebView: 遵守協議 <WKNavigationDelegate, WKUIDelegat ...
前言：
在iOS開發中，或多或少的會嵌入一些H5頁面，有時候需要原生代碼和H5頁面進行交互。iOS8開始蘋果推出性能更強大的WKWebView,所以一下方法是關於WKWebView與JS的交互。
創建WKWebView:
遵守協議
<WKNavigationDelegate, WKUIDelegate, WKScriptMessageHandler>
-(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<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事件監控：
-(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"]) {
}
}
