UIWebView 适配屏幕

作者: David_Cap | 来源:发表于2015-08-12 14:39 被阅读5117次

    UIWebView 适配屏幕

    概述

    这个问题困扰了我好多天,了寻找了很多解决方法但是不见效果。

    首先我来说说故事背景吧,在一个项目的中,我被要求去把数据库里的一段HTML代码加载到app当中。我以为还是挺简单的,但是问题来了。

    如何在App中加载一大段 HTML呢???

    首先 当然要用到 UIWebView,大家和我估计第一反应都是这样。如何写代码呢 check一下也很多。大体如下:

        NSString *HTMLData = dataPostFormDataBase;
        [self.webView loadHTMLString:HTMLData baseURL:[NSURL fileURLWithPath: [[NSBundle mainBundle]  bundlePath]]];
    

    so easy 妈妈再也不用担心我的webView,但是问题又来了,HTML代码里面 好像没有定义宽高 约束布局。到了webView里面图片就会变的 大的离谱。

    那怎么调整大小呢

    Google了一下(不会被抓吧),查到这么一个属性:

        self.webView.scalesPageToFit = YES;
    

    然后 嘿,好想还真变小了,但是问题又来了,由于HTML 没有定义约束,这是的图片变的太小了,右边有许多地方留白,那不是见鬼了啊。

    于是乎又要踏上漫漫Google路。

    用JS控制其宽度

    经过查询,原来可以在webView 中嵌入JS,屌炸了。然后我就知道怎么调整宽高了。

    思想如下:找到HTML代码中包裹img的父容器(我的是p标签),把它的宽度调整为屏幕的宽度。值得注意的是,一定要在 didFinishLoad的后 才能添加JS,不然JS加上去没用。原因,自己check一下吧。

    具体代码如下:

    -(void)webViewDidFinishLoad:(UIWebView *)webView
    {
        //定义JS字符串
        NSString *script = [NSString stringWithFormat: @"var script = document.createElement('script');"
                            "script.type = 'text/javascript';"
                            "script.text = \"function ResizeImages() { "
                            "var myimg;"
                            "var maxwidth=%f;" //屏幕宽度
                            "for(i=0;i <document.images.length;i++){"
                            "myimg = document.images[i];"
                            "myimg.height = maxwidth / (myimg.width/myimg.height);"
                            "myimg.width = maxwidth;"
                            "}"
                            "}\";"
                            "document.getElementsByTagName('p')[0].appendChild(script);",ScreenW];
        
        //添加JS
        [webView stringByEvaluatingJavaScriptFromString:script];
        
        //添加调用JS执行的语句
        [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
    }
    

    结语

    上面纯属个人粗糙实现,如果有更好的办法 可以和我分享我会更加感谢。

    相关文章

      网友评论

      • iOS_Ken:高度不需要设置…我加载之后…发现webview拉到最后有很多空白区域…?
        iOS_Ken:可以加你的QQ进行讨论…?
        iOS_Ken:高度很高…内容后面有很多空白区域
        David_Cap:@c7a707cf93bf 什么意思,空白???
      • d99a30765bb8:为甚么 我用你的方法没效果啊 是不是 这儿得换成我的 @"ResizeImages()
      • 刘sir8:这一段 @"ResizeImages()是不是要换成我自己的什么东西? 急呀 求助!
        David_Cap:@1a654cb40b4e 其实我也只是一个小菜,大家多交流吧。:smile::smile:
        刘sir8:@David_Cap 明天我再调试一下,不懂再请教你:smiley:
        David_Cap:@1a654cb40b4e 这个就是调用JS的方法,而ResizeImages就是JS中对应得function。你可以随便换成自己的function。要处理的事情写在function中。

      本文标题:UIWebView 适配屏幕

      本文链接:https://www.haomeiwen.com/subject/stwiqttx.html