zoukankan      html  css  js  c++  java
  • iOS项目之WKWebView替换UIWebView相关

            在网上已经有了许多关于UIWebView替换为WKWebView的文章,所以在这里就不在多说替换的细节了,不会的可以在网上搜搜。

            下面是我在项目中遇到的问题:

    问题一:在UIWebView中,网页显示(包括图片显示)比例正常,替换为WKWebView后,比例显示不正常

    解决方案:直接上代码

            /* 在创建WKWebView的时候,配置环境中添加下面的js语句,可以使界面自适应屏幕 */
            // 自适应屏幕宽度js
            NSString *jSString = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
            
            WKUserScript *wkUserScript = [[WKUserScript alloc] initWithSource:jSString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    
            // 自定义配置,一般用于js调用oc方法(oc拦截URL中的数据做自定义操作)
            WKUserContentController *userContentController = [[WKUserContentController alloc] init];
    
            [userContentController addUserScript:wkUserScript];    

            解决图片显示比例的代码在我的另外一篇文章中写到过,这里就不再写了。

    问题二:将webView添加到cell的contentView中,UIWebView创建的界面能够展示完整,而WKWebView创建的界面只能够展示一部分

    分析:此时出现的白屏问题,详细分析可以去看看这位大神写的简书(WKWebView刷新机制小探):http://www.jianshu.com/p/1d739e2e7ed2,地址已附上。

    解决方案:在cell的contentView中添加自定义的scrollView,然后再将WKWebView创建的webView添加到这个scrollView中,就能解决此类白屏问题。

    部分代码附上:

    @interface WebCell ()<WKNavigationDelegate, WKUIDelegate, WKScriptMessageHandler>
    
    @property(nonatomic, weak) UIScrollView *webScrollView;
    
    @property(nonatomic, weak) WKWebView *webView;
    
    @end
    
    @implementation WebCell
    
    - (UIScrollView *)webScrollView
    {
        if (!_webScrollView) {
            UIScrollView *sv = [[UIScrollView alloc] init];
            [self.contentView addSubview:sv];
            _webScrollView = sv;
        }
        return _webScrollView;
    }
    
    - (WKWebView *)webView
    {
        if (!_webView) {
            // 配置环境
            WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
            // 自适应屏幕宽度js
            NSString *jSString = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
            WKUserScript *wkUserScript = [[WKUserScript alloc] initWithSource:jSString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
            // 允许视频播放
            if (iOS_Version(9.0)) {
                configuration.allowsAirPlayForMediaPlayback = YES;
            }
            // 允许在线播放
            configuration.allowsInlineMediaPlayback = YES;
            // 允许与网页交互
            configuration.selectionGranularity = YES;
            // 内容处理池
            configuration.processPool = [[WKProcessPool alloc] init];
            // 自定义配置,一般用于js调用oc方法(oc拦截URL中的数据做自定义操作)
            WKUserContentController *userContentController = [[WKUserContentController alloc] init];
            // 添加消息处理,注意:self指代的对象需要遵守WKScriptMessageHandler协议,结束时需要移除
            [userContentController addScriptMessageHandler:self name:@"Handle"];
            [userContentController addUserScript:wkUserScript];
            // 是否支持记忆读取
            configuration.suppressesIncrementalRendering = YES;
            // 允许用户更改网页的设置
            configuration.userContentController = userContentController;
            // 创建wk
            WKWebView *wv = [[WKWebView alloc] initWithFrame:CGRectZero configuration:configuration];
            // 设置背景色
            wv.backgroundColor = [UIColor clearColor];
            wv.opaque = NO;
            // 设置代理
            wv.navigationDelegate = self;
            wv.UIDelegate = self;
            // 网页内容禁用滑动
            wv.scrollView.scrollEnabled = NO;
            
            // kvo添加进度监控
    //        [wv addObserver:self forKeyPath:NSStringFromSelector(@selector(estimatedProgress)) options:0 context:nil];
            
            // 开启手势触摸
            wv.allowsBackForwardNavigationGestures = YES;
            // 自适应
            [wv sizeToFit];
            
            [self.webScrollView addSubview:wv];
            _webView = wv;
        }
        return _webView;
    }
    
    #pragma mark - <设置数据>
    - (void)setModel:(Model *)model
    {
        _model = model;
        
        // 手动改变图片适配问题,拼接html代码后,再加载html代码
            NSString *myStr = [NSString stringWithFormat:@"<head><style>img{max-%f !important;}</style></head>", SCREEN_WIDTH - 20];
            NSString *str = [NSString stringWithFormat:@"%@%@",myStr, model.htmlStr];
            [self.webView loadHTMLString:str baseURL:nil];
    }
    
    #pragma mark - <界面布局>
    - (void)layoutSubviews
    {
        [super layoutSubviews];
        
        [self.webView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.bottom.left.right.mas_equalTo(self.contentView);
        }];
    }
    
    #pragma mark - <WKNavigationDelegate>
    - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
    {
        [webView evaluateJavaScript:@"document.body.scrollHeight" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
            // 获取webView的高度
            CGFloat webViewHeight = [response floatValue];
           // 设置自定义scrollView的frame
            self.webScrollView.frame = CGRectMake(0, 0, SCREEN_WIDTH, webViewHeight);
            // 通过代理方法,刷新表格高度
            if ([self.delegate respondsToSelector:@selector(webViewWithChangeHeight:)]) {
                [self.delegate webViewWithChangeHeight:webViewHeight];
            }
        }];
    }
    
    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
    {}
    
    - (void)dealloc
    {
        [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Handle"];
    }
    
    @end

     问题三:webView中有捏合手势,往往在项目中我们不需要这个手势,则看下面的js代码

    - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
    {
        // 禁用网页捏合手势
        NSString *injectionJSString = @"var script = document.createElement('meta');"
        "script.name = 'viewport';"
        "script.content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no";"
        "document.getElementsByTagName('head')[0].appendChild(script);";
        [webView evaluateJavaScript:injectionJSString completionHandler:nil];
    }

    问题四:如果在webView中,需要点击网页中的图片查看大图时,则看下面的js代码

    - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
    {
        //这里是js,主要目的实现对url的获取
        static  NSString * const jsGetImages =
        @"function getImages(){
        var objs = document.getElementsByTagName("img");
        var imgScr = '';
        for(var i=0;i<objs.length;i++){
        imgScr = imgScr + objs[i].src + '+';
        };
        return imgScr;
        };";
        
        [webView evaluateJavaScript:jsGetImages completionHandler:nil];
        
        // 执行js中方法获取图片
        [webView evaluateJavaScript:@"getImages()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
            NSString *urlResurlt = [NSString stringWithFormat:@"%@", response];
            _mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];
            if (_mUrlArray.count >= 2) {
                [_mUrlArray removeLastObject];
            }
            //urlResurlt 就是获取到得所有图片的url的拼接;_mUrlArray就是所有Url的数组
        }];
    
        //添加图片可点击js
        static  NSString * const jsImageClick =
        @"function registerImageClickAction(){
        var imgs=document.getElementsByTagName('img');
        var length=imgs.length;
        for(var i=0;i<length;i++){
        img=imgs[i];
        img.onclick=function(){
        window.location.href='image-preview:'+this.src}
        }
        }";
        
        [webView evaluateJavaScript:jsImageClick completionHandler:nil];
        
        [webView evaluateJavaScript:@"registerImageClickAction()" completionHandler:nil];
    }
    
    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
    {
        decisionHandler(WKNavigationActionPolicyAllow);
        
        //预览图片
        if ([navigationAction.request.URL.scheme isEqualToString:@"image-preview"]) {
            NSString* path = [navigationAction.request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
            path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
            //path 就是被点击图片的url
            
            // 在这里获取网页中的图片数组,进行展示
    
            return;
        }
        
        if ([navigationAction.request.URL.scheme isEqualToString:@""]) {
    //        NSLog(@"%@", navigationAction.request.URL);//在这里可以获得事件
            return;
        }
    }

    希望以上能帮助更多需要帮助的人,如果有疑问,也希望大神能多多给小弟提意见和建议。

  • 相关阅读:
    Ant 执行 exec cmd.exe 时路径包含空格的问题
    时区时差换算(GMT,UTC,PST,PDT)
    windows 共存多个位数不同的jdk时,eclipse的报错对应措施
    Windows下查询指定端口进程,并杀死
    关于windows的jdk
    第一阶段工作总结
    mac配置git mergetool为p4merge(2013笔记整理)
    ubuntu 14.04 安装压缩包版mysql
    关于微信公众号内嵌网页的几个meta标签
    关于js的keyCode
  • 原文地址:https://www.cnblogs.com/sjxjjx/p/6439016.html
Copyright © 2011-2022 走看看