iOS 与 H5 结合时候遇到的一些问题(非互调问题)

前言:

 在最近的工作中遇到这样一个场景..虽然不是很常见的场景可是期间遇到的问题还是拿出来给大家分享一下,以备以后有人遇到同样的问题可以节省时间.
 场景介绍: 一个tableview 在不改动的情况下嵌入一个webView  1.webView 加入到tableView上
  2. webView和tableView 同时加入到self.view上 3. webView 上加入tableView


前面1.2 中方法中不得不解决上下滑的手势冲突问题.如果你在scrollview的delegate中的-didscroll 里边进行高度判断.这样做你会发现有一个卡顿的问题.当offset到达你判断的位置的时候你切换两个scrollview 的scrollenable 属性打断了滑动,而不是把接下来的位移给到另一个scrollview 所以要滑第2次才能成功将你目标要滑动的scrollview滑动到应该到达的位置.如果不是很清楚,自己尝试一下就可以了.解决方法当然是可以重写手势.也是最应当的办法,但是奈何时间过短只能另辟蹊径.      通过方法3: 将tableview 作为webView 的类似于headerview 来进行操作,那么方法有两种我都进行了尝试:      1. 将tableview 加入到webView的scrollview 上来实现此时就要设置该scrollView的contentInset 从而设置一个tableview高度的偏移量,从而使得tableview的显示能够正常(即tableview 的height为inset的top),在测试中出现两个问题,一个是在加载的时候webView的部分会成为黑色,将webView.opaque = NO即可,或者将webView更换为WKWebView也可以解决这个问题,但是另一个问题就比较严重了.webView的scrollview设置的contentInset的部分 在滑动的时候webView 显示内容滑动到contentInset 里边的部分不能接收事件,在简书上看到了一样的思路经过验证也有同样的问题,git上的地址为:git链接WebView的header.(可以发现webView虽然能接收事件但是同样存在别的难以解决的问题.而将demo的webView改为WKWebView发觉问题依然存在).      2.在webView加载成功之后,在显示的webView的最上边JS 插入一个div相当于把原有的网页做了更改,将网页内容整体下移了一个tableview的高度.contentInset 就不用设置了,然后将tableview 加入到webVIew的scrollview上边即可具体代码粘给大家

NSString *js = [NSString stringWithFormat:@"\
var appendDiv = document.getElementById(\"AppAppendDIV\");\
if (appendDiv) {\
appendDiv.style.height = %@+\"px\";\
} else {\
var appendDiv = document.createElement(\"div\");\
appendDiv.setAttribute(\"id\",\"AppAppendDIV\");\
appendDiv.style.width=%@+\"px\";\
appendDiv.style.height=%@+\"px\";\
document.body.insertBefore(appendDiv, document.body.firstChild);\
}\
", @(self.topViewEdge.top), @(self.wkweb.scrollView.contentSize.width), @(self.topViewEdge.top)];

[self.wkweb evaluateJavaScript:js completionHandler:nil];

解释一下: 有个div 的id是AppAppendDIV 首先通过document和id 获得这个div 如果没有则创建如果有则设置样式的高度.
这种方法有个缺陷就是加载完成之后插入js-(void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation{插入}
这样就是会在加载成功之后如果缓慢的话会有页面的跳动从0.0 跳动到tableview的部分用户体验不是很好.对此我们没有进行其他额外的操作,但是是可以解决的,例如可以在刚入界面的时候给一个contentinset然后再上边的方法插入js之前将contentinset设置为zero能够解决这个问题.如果您有更好的方法,请提出谢谢.