iOS:WKWebView(19-05-30更)
以前用得不多,先开一篇,以后有遇到再补充。
1、返回
2、JS 调用 OC
3、获取、修改、添加、删除网页信息
1、返回
if (self.mWebView.canGoBack == YES) { [self.mWebView goBack]; }else{ //提示 };
2、JS 调用 OC
2-1)、添加 和 JS 约定的消息名
[self.userContentController addScriptMessageHandler:self name:@"约定的消息名"];
2-2)、得到 JS 消息
#pragma mark - WKScriptMessageHandler - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { if ([message.name isEqualToString:@"约定的消息名"]) { NSLog(@"传过来的value为:%@", message.body[@"约定的key"]); } }
2-3)、移除
- (void)viewWillDisappear:(BOOL)animated{ [super viewWillDisappear:animated]; [self.userContentController removeScriptMessageHandlerForName:@"约定的消息名"]; }
补充:这步最为重要,如果不移除,将得不到释放,比如H5的音乐在退出该VC(dealloc) 还会一直响。
附:JS代码
function isAndroid(argument) { var u = navigator.userAgent; var flag = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 return flag; } function isIOS(argument) { var u = navigator.userAgent; var flag = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 return flag; } function share(要传的value) { if(isAndroid()){ } else if(isIOS()) { window.webkit.messageHandlers.约定的消息名.postMessage({ "约定的key": 要传的value }); } }
3、获取、修改、添加、删除网页信息
3-1)、获取
3-1-1)、获取网页数据
[webView evaluateJavaScript:@"document.body.outerHTML" completionHandler:^(id _Nullable htmlStr, NSError * _Nullable error) { NSLog(@"htmlStr = %@",htmlStr); }];
3-1-2)、获取网页高度,看需更新高度(如高度固定,网页内部能滑动,如更改高度为当前高度,网页不能滑动)
[webView evaluateJavaScript:@"document.body.scrollHeight" completionHandler:^(id result, NSError *_Nullable error) { }];
补充:如计算出来的高度偏大、字体、图片偏小,可能是没自适应,需要对其修改。
参照 “3、获取、修改、添加网页信息” -> “3-3)、添加” -> “3-3-1)、自适应图片” 和 “3-3-2)、自适应文字”
3-2)、修改
3-2-1)、修改背景、文字颜色
[webView evaluateJavaScript:@"document.body.style.backgroundColor=\"#72ADFC \"" completionHandler:nil]; [webView evaluateJavaScript:@"document.body.style.webkitTextFillColor= '#FFFFFF'"completionHandler:nil];
3-2-2)、修改网页内容(比如:图片)
[webView evaluateJavaScript:@"document.getElementsByClassName('图片xxx')[0].src='http://www.测试测试.com/测试测试.jpg'" completionHandler:^(id _Nullable htmlStr, NSError * _Nullable error) {
// 延时再显示(否则之前的图片会显示出来,再刷新当前设置的图片,一闪而过)
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// 显示
self.mainWebView.hidden = NO;
});
}];
3-3)、添加
3-3-1)、自适应图片。比如 @"document.body.scrollHeight" 算出来感觉偏大,图片偏小。需要在在html字符串增加数据
flexHtmlString = [NSString stringWithFormat:@"<html><head><meta content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\" name=\"viewport\"><style type=\"text/css\">img{display: inline-block;max-width: 100%%}</style></head><body>\%@</body></html>",htmlString];
3-3-2)、自适应文字。比如 @"document.body.scrollHeight" 算出来感觉偏大,文字偏小。需要设置WKUserScript
NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"; WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES]; WKUserContentController *wkUController = [[WKUserContentController alloc] init]; [wkUController addUserScript:wkUScript];
3-3-3)、添加高度参数,源数据没style。
[webView evaluateJavaScript:@"document.getElementsByClassName('图片xxx')[0].style='width: 70px;height:auto !important;'" completionHandler:^(id _Nullable htmlStr, NSError * _Nullable error) {
}];
3-4)、删除
3-4-1)、删除子项
[webView evaluateJavaScript:@"document.body.removeChild(document.getElementsByClassName('xxx')[0])" completionHandler:^(id _Nullable htmlStr, NSError * _Nullable error) {
}];
3-4-2)、删除子项中的子项
[webView evaluateJavaScript:@"document.body.getElementsByClassName('xxx1')[0].removeChild(document.getElementsByClassName('xxx1')[0].getElementsByClassName('xxx2')[0])" completionHandler:^(id _Nullable htmlStr, NSError * _Nullable error) { }];