iOS加載html字符串的圖片適配問題 loadHTMLString: baseURL:

1、加載HTML字符串時,里面有圖片標簽<img的顯示有時候過寬過高。下面這段js代碼就是取到所有圖片,給高度設(shè)置最大值。

- (void)webViewDidFinishLoad:(UIWebView *)webView{

[webView stringByEvaluatingJavaScriptFromString:
         @"var script = document.createElement('script');"
         "script.type = 'text/javascript';"
         "script.text = \"function ResizeImages() { "
         "var myimg,oldwidth;"
         "var maxwidth = 360;" // UIWebView中顯示的圖片寬度
         "for(i=0;i <document.images.length;i++){"
         //     "var httpP = \"http://webapi.houno.cn\"+imageArr[i].getAttribute(\"src\");"
         //     "imageArr[i].setAttribute(\"src\",httpP);"  // 遇到返回圖片路徑不是全路徑的情況拼接,但沒有成功!估計是加載先后順序問題導(dǎo)致,這個方法走的時候已經(jīng)加載完成。
         "myimg = document.images[i];"
         "if(myimg.width > maxwidth){"
         "oldwidth = myimg.width;"
         "myimg.width = maxwidth;"
         "}"
         "}"
         "}\";"
         "document.getElementsByTagName('head')[0].appendChild(script);"];
        [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
}

但是這個方法把寬度設(shè)置了固定值,在不同機型上不能很好的展示!

2、還有一種不用考慮寬度問題的方法

- (void)webViewDidFinishLoad:(UIWebView *)webView{

        NSString *js = @"function imgAutoFit() { \
        var imgs = document.getElementsByTagName('img'); \   // 取到所有圖片
       for (var i = 0; i < imgs.length; ++i) {\
        var img = imgs[i];   \
        img.style.maxWidth = %f;   \
        img.style.maxHeight = %f;    \
        } \
        }";
        js = [NSString stringWithFormat:js, [UIScreen mainScreen].bounds.size.width - 20,200];  // 設(shè)置寬高,高度可以不設(shè)置
        
        [webView stringByEvaluatingJavaScriptFromString:js];
        [webView stringByEvaluatingJavaScriptFromString:@"imgAutoFit()"];
      
}

以上這兩種方法都有一個問題,當HTML標簽中的圖片有自帶的Style標簽(包括寬高的相關(guān)設(shè)置)時,加載HTML還是按照自己的style,所有還是存在過高、過寬的問題。

3、為了解決HTML中圖片自帶寬高屬性問題,所以要在加載HTML字符串之前對字符串進行處理。

拼接圖片地址成功版本:


   NSString *htmls = [NSString stringWithFormat:@"<html> \n"
                               "<head> \n"
                               "<style type=\"text/css\"> \n"
                               "body {font-size:15px;}\n"
                               "</style> \n"
                               "</head> \n"
                               "<body>"
                               "<script type='text/javascript'>"
                               "window.onload = function(){\n"
                               "var $img = document.getElementsByTagName('img');\n"
                               "for(var p in  $img){\n"
                               "var httpP = \"http://webapi.houno.cn\"+$img[p].getAttribute(\"src\");"
                               "$img[p].setAttribute(\"src\",httpP);"    // 這里發(fā)現(xiàn)拼接圖片地址也能成功了。
                               "$img[p].style.width = '100%%';\n"
                               "$img[p].style.height ='auto'\n"
                               "}\n"
                               "}"
                               "</script>%@"
                               "</body>"
                               "</html>",webInfo]; // 這里的webInfo就是原始的HTML字符串。
            [self.myWebView loadHTMLString:htmls baseURL:nil];

            DLog(@"webInfo后:%@",htmls);

目前為止我遇到的問題基本解決了。

相關(guān)參考:只記得這一個啦!

http://blog.csdn.net/wenmingzheng/article/details/50493658?utm_source=itdadao&utm_medium=referral

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,178評論 25 708
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,531評論 1 41
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,647評論 19 139
  • 父親留給我的很重要一個特質(zhì)就是心比較軟,請注意是心軟哦,不是善良。這種特征讓我缺少果斷力和執(zhí)行力。甚至有時候沒有自...
    芒果和桃閱讀 259評論 0 0
  • 文/雨觴 -1- 小雨不知道什么時候喜歡上了一個人獨處的生活,一個人吃飯、一個人上學(xué)、一個人讀書、一個人聽歌。 而...
    雨觴閱讀 640評論 6 8

友情鏈接更多精彩內(nèi)容