iOS 【野路子】获取WKWebView内容高度做H5原生连接

原创 2017年09月14日 17:39:34

我的简书新地址,欢迎点击查看哦~

前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能有新的收获,我们也都致力于写一些能帮别人解决问题的文章,下面我用另一种方式来完美实现这个问题.毕竟之前大家都是根据UIWebView写的,我来说说换成WK之后的区别,主题思路也不同哦~
插两个链接,是我朋友的大家也可以做个对比

iOS 【终极方案】精准获取webView内容高度,自适应高度
iOS 【奇巧淫技】获取webView内容高度
iOS WKWebView 图片点击放大并左右滑动,类似微信/网易文章功能

首先先说应用场景吧,这样大家可能更能接受一点

例1:一个页面 分为上下两个部分,上部分为文章,商品图文介绍等(H5)一个web,下半部分是原生的列表(tableView)
那么怎么把H5和原生结合在一起呢,最简单的思想就是把H5做成表头,对吧.那么获取Web部分的真实高度就是最大的难点公关.

例2:上面是一个原生介绍,下面分为3部分,其中一部分是H5页面的详情介绍,一部分是评论列表,一部分是相关推荐等等,这样,最合理的结构就是:上面作为一个Tabview的表头,下面共用同一个tabview,将H5的web嵌入成某一种tableviewCell当中.那么难点就是怎么获取Web这个cell的高度返回.

我就拿第二种来举例子吧.毕竟第二种更复杂一些,而且例1 很多工程都实现了,我朋友的文章也能实现这个功能,第二种例子,我用WKWebView给大家提供一个新的思路.

哔哔叨叨了这么多,下面开始说正题吧.

首先跟大家说一下,简单的获取contentSize 什么的(网上一搜随处可见的那几个方法)我就不吐槽了,他们的应用场景太局限了,稍微在进行富文本编辑的时候 插入的图片 尺寸 或者某些动图之类的 都会导致你获取的高度不准,然后界面UI恶心到不行.
那么思路依旧是跟我上一篇文章一样 利用JS注入来解决
首先从加载的时候开始
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if(self){
self.contentView.backgroundColor = NineColorOne;
[self creatSubviews];
}
return self;
}
- (void)creatSubviews
{
WKWebViewConfiguration *confifg = [[WKWebViewConfiguration alloc] init];
confifg.selectionGranularity = WKSelectionGranularityCharacter;
_webView = [[WKWebView alloc] initWithFrame:CGRectMake(14, 0, CurrentScreenWidth - 28, 1) configuration:confifg];
self.contentView.backgroundColor = NineColorOne;
// _webView.scalesPageToFit = NO;
_webView.scrollView.scrollEnabled=NO;
_webView.userInteractionEnabled = NO;
_webView.opaque = NO;
_webView.scrollView.bounces=NO;
_webView.backgroundColor=NineColorOne;
_webView.scrollView.decelerationRate=UIScrollViewDecelerationRateNormal;
[self.contentView addSubview:_webView];
}

我刚才说了,把web放在一个cell里,那么它的代理就要在VC里面去签.
大家注意到,_webView.scalesPageToFit = NO;这句话我屏蔽掉了,因为WKWebView是没有这个属性的 它和UIWebView不同,然而 如果不设置NO, WKWebView的默认效果和UIWebView.scalesPageToFit = YES是一样的,这时候,你需要这段代码:

<meta content=\"width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=0;\" name=\"viewport\" />

这段代码 注入在加载的时候
例如:

- (void)setDetail:(NSString *)detail
{
        if(!_detail){
                _detail = detail;
            if (_detail.length >0) {

                [_webView loadHTMLString:[NSString stringWithFormat:@"<meta content=\"width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=0;\" name=\"viewport\" />%@<div id=\"testDiv\" style = \"height:100px; width:100px\"></div>",_detail] baseURL:[NSURL fileURLWithPath: [[NSBundle mainBundle]  bundlePath]]];
                }
        }
}

注意2点:
1.因为整体逻辑是 Web放在cell里,加载完成后刷新tabview,那么刷新的时候 走代理方法cellforrow,则cell会重新赋值,产生死链.所以在赋值时候要做基本处理
2.我在注入scalesPageToFit代码的同时,似乎还加了一个div?对的,你没有看错.下面我就说一说,这个div是干什么用的

我们将目光切回到VC

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
         _webview = cell.webView;
        cell.webView.navigationDelegate = self;
        cell.webView.UIDelegate = self;
        cell.selectionStyle = 0;
        cell.detail = @"这里就是你要加载的html";

这是代理方法里面cell的部分代码.可以看到 代理我们都签在了VC里
紧接着看加载完成方法

- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation
{

    [webView evaluateJavaScript:@"document.getElementById(\"testDiv\").offsetTop"completionHandler:^(id _Nullable result,NSError * _Nullable error) {
        //获取页面高度,并重置webview的frame
        CGFloat lastHeight  = [result doubleValue];
        webView.frame = CGRectMake(14, 0, CurrentScreenWidth - 28, lastHeight);
        webHeight = lastHeight;
        [self.tableView beginUpdates];
        [self.tableView endUpdates];
    }];



}

注意看一下这里,首先WK的JS注入方法有变化,其次就是你发现我取web的高度利用了我刚才在加载HTML时注入的div块
这样,不管你的网页是什么样的,在尾部加一个div它的位置永远是你需要的高度.(一定要注意这段代码不加的话 获取的高度同样不准哦)

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if(_type == 0){
        return webHeight;
        }// 当前tableview是加载web状态时 cell返回高度

那么这个时候 你还会发现,滚动tableView时,web显示内容没有变化!!!
对,这就是WKWebView的另一个区别,由于WKWebView采用的lazy加载模式,所在的scrollView的滚动被禁用,导致被嵌套的WKCompositingView不进行数据加载。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // 判断webView所在的cell是否可见,如果可见就layout
    NSArray *cells = self.tableView.visibleCells;
    for (UITableViewCell *cell in cells) {
        if ([cell isKindOfClass:[UITableViewCell class]]) {
            UITableViewCell *webCell = (UITableViewCell *)cell;
            [webCell.webView setNeedsLayout];
        }
    }
}

你需要加上这个代码.

嗯这时候,H5和原生就完美的无缝连接了.
这些东西也并非我一个人独立想出来的,在这里也对我的好朋友–徐阳 表示由衷的感谢,是他给我提供了很多思路.对,就是上面我推荐文章的那个人.

还不知道下一篇想写什么,最近忽然又对写博客起了兴趣.

版权声明:本文为博主原创文章,未经博主允许不得转载。

WKWebView获取内容高度

*webView = [[UIWebView alloc] init]; [webView loadRequest:[NSURLRequest requestWithURL:[NSURL UR...
  • coyote1994
  • coyote1994
  • 2017年06月26日 19:16
  • 1497

iOS获取h5的内容

- (void)viewDidLoad {[super viewDidLoad];NSString *strurl=@"html 地址";UIWebView *web = [[UIWebView al...
  • SandyLoo
  • SandyLoo
  • 2016年12月26日 14:39
  • 2144

iOS UIWebView、WKWebView获取内容高度

UIWebView、WKWebView获取内容高度
  • lovechris00
  • lovechris00
  • 2017年05月16日 10:17
  • 3549

WKWebView、UIWebView 高度自适应

如果你想使用WKWebView,需要在程序中做一下判断,因为WKWebView只有在iOS8.0以后才出现的。 if([[[UIDevice currentDevice] systemVersion]...
  • Leemin_ios
  • Leemin_ios
  • 2016年08月18日 20:21
  • 4700

WebKit.Net使用要点记录

1、跳转网页 和微软自带的Webbrowser类似,如下: webKitBrowser1.Navigate("http://www.baidu.com"); 或 webKitBrowser1.Ur...
  • u011014032
  • u011014032
  • 2014年12月16日 17:17
  • 2978

iOS【野路子】精准获取webView内容高度,自适应高度

关于WebView内容高度的获取,相信很多人都踩过坑,无法获取到准确高度,导致页面布局出现差错,搜到的资料很多但都无法解决问题,以下是个人经验总结: 项目需求实现H5文章&原生评论效果,文章是加载H...
  • q644419002
  • q644419002
  • 2017年02月24日 17:34
  • 2426

WKWebView与js交互之完美解决方案

最近对团队中的混合开发框架进行了重构,下面就和大家来说说自己的思路以及解决方案。   随着H5功能愈发的强大,没进行过混合开发的小伙们都不好意思说自己能够独立进行iOS的app开发,在iOS7操作系...
  • HHL110120
  • HHL110120
  • 2017年04月04日 19:09
  • 22883

WKWebView JS互调(高级篇)

转自:http://www.jianshu.com/p/d19689e0ed83 上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC ...
  • Jason_chen13
  • Jason_chen13
  • 2016年12月17日 01:52
  • 1877

iOS -- WKWebView + KVO 方式获取Web的高度(非js)

随着项目中的web页加载越来越多。UIWebView使用的频率也越来越多,之前也没有过多的研究。总结一下: UIWebView 是从iOS2开始的,WKWebView是从iOS8才有,WKWe...
  • Fydevelop
  • Fydevelop
  • 2017年12月28日 10:30
  • 60

iOS【终极方案】精准获取webView内容高度,自适应高度

关于WebView内容高度的获取,相信很多人都踩过坑,无法获取到准确高度,导致页面布局出现差错,搜到的资料很多但都无法解决问题,以下是个人经验总结: 项目需求实现H5文章&原生评论效果,文章是加...
  • xuyang844175181
  • xuyang844175181
  • 2017年02月24日 17:15
  • 466
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS 【野路子】获取WKWebView内容高度做H5原生连接
举报原因:
原因补充:

(最多只允许输入30个字)