在上下滚动的时候 webview内容部分消失的解决办法

今天发现之前的商品详情页在图文详情页面是用的 UIWebView 在 Xcode8 上面跑都是没有问题的, 但是在 Xcode9 上面跑 在上下滚动的时候, webview内容部分消失.如图 ,我就纳闷了, 就放了一个 webView 我又没有做啥操作, 为啥会出现这种情况呢.而且在 Xcode8 上面是正常的, 在9上就不正常了,很奇怪. 于是我把那个连接拿出来 在新建的程序跑起来, 用 UIWebView 还是这样的问题.于是 我就想到不用 UIWebView QQ20180103-171731-HD.gif

解决办法
就是用 WKWebView 代替 UIWebView WKWebView在各个性能都要比UIWebView高, 这是个不错的选中, 事实证明, 我的选择也是正确的.如果你仅仅是为了解决现实的问题, 那么你就换成WKWebView.

下面我就要说我遇到的其他问题. 因为我不止现实的问题 , 我的还需要点击图片放大, 所以得加拦截到点击事件.

1. 添加点击事件, 需要后台加点击的标签, 然后我们去拦截标签, 这是一种方法,
   2 自己给这个忘记植入 JS 代码.

因为我们后台设置的这个图片用通过富文本编辑, 所以不好加标签, 后台本来也可以植入 JS 代码的, 但是也是因为上面这个原因 不能加. 所以就只能我们这边植入 JS 代码了 .在原来用UIWebView 也是我们这边植入的JS 代码. 但是换成 WKWebView 再次植入的代码就不行了

// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
    //js方法遍历图片添加点击事件 返回图片个数
    static  NSString * const jsGetImages =
    @"function getImages(){\
    var objs = document.getElementsByTagName(\"img\");\
    for(var i=0;i<objs.length;i++){\
    objs[i].onclick=function(){\
    document.location=\"myweb:imageClick:\"+this.src;\
    };\
    };\
    return objs.length;\
    };";
    DLog(@"%@",jsGetImages);
    [webView evaluateJavaScript:@"getImages()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
         NSLog(@"value: %@ error: %@", response, error);
    }];

}

于是就上网找了找相关的一些文章.大多数都是没有提到的,找了很久, 尝试了很多种方法都不行,于是我就把实例化的方式改变了之前是

- (WKWebView *)mainWeb
{
    if (!_mainWeb) {
        _mainWeb = [[WKWebView alloc]initWithFrame:CGRectMake(0, NavHeight, ScreenWidth, ScreenHeight - NavHeight)];
        _mainWeb.navigationDelegate = self;
        _mainWeb.UIDelegate = self;
        [self.view addSubview:_mainWeb];
    }
    return _mainWeb;
}

换成了下面这种

- (WKWebView *)mainWeb
{
    if (!_mainWeb) {
        // 根据JS字符串初始化WKUserScript对象
        static  NSString * const jsGetImages =
            @"function getImages(){\
            var objs = document.getElementsByTagName(\"img\");\
            for(var i=0;i<objs.length;i++){\
            objs[i].onclick=function(){\
            document.location=\"myweb:imageClick:\"+this.src;\
            };\
            };\
            return objs.length;\
            };";
        WKUserScript *script = [[WKUserScript alloc] initWithSource:jsGetImages injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
//
//        // 根据生成的WKUserScript对象，初始化WKWebViewConfiguration
        WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
        [config.userContentController addUserScript:script];
        _mainWeb = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight - TabbarHeight)configuration:config];
        _mainWeb.navigationDelegate = self;
        _mainWeb.UIDelegate = self;
        [self.view addSubview:_mainWeb];
    }
    return _mainWeb;
}

果然黄天不负有心人呀, 花了大半天的时间终于找到了原因, 就是要在WKWebView 实例化的时候 也要植入 JS 代码, 这样就可以点击图片的时候就能走下面的方法了. 000D949B-FC46-4877-867D-3FCD00971989.png