UIWebView加載html 圖片大小自適應的方法彙總

時間 2019-12-09

標籤 uiwebview 加載 html 圖片大小自適應方法彙總欄目 HTML 简体版

原文原文鏈接

方法一

處理HTMLString的方法：

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"
                              " $img[p].style.width = '100%%';\n"
                               "$img[p].style.height ='auto'\n"
                           "}\n"
                           "}"
                           "</script>%@"
                           "</body>"
                           "</html>",htmlString];

 [self.webView loadHTMLString:htmlString baseURL:nil];

處理HTMLString的原理：

原理就是用一個for循環，拿到全部的圖片，對每一個圖片都處理一次，讓圖片的寬爲100%，就是按照屏幕寬度自適應；讓圖片的高atuo，自動適應。文字的字體大小，能夠去改font-size:15px，這裏我用的是15px。根據本身的具體需求去改吧。javascript

方法二

[webView stringByEvaluatingJavaScriptFromString:css

@"var script = document.createElement('script');"html

"script.type = 'text/javascript';"java

"script.text = \"function ResizeImages() { "web

"var myimg,oldwidth;"app

"var maxwidth=300;" //縮放係數改變參數控制圖片縮放大小字體

"for(i=0;i <document.images.length;i++){"lua

"myimg = document.images[i];"spa

"if(myimg.width > maxwidth){"code

"oldwidth = myimg.width;"

"myimg.width = maxwidth;"

"myimg.height = myimg.height * (maxwidth/oldwidth);"

"}"

"}\";"

"document.getElementsByTagName('head')[0].appendChild(script);"];

[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];

方法三

- (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; \

} \

}";

js = [NSString stringWithFormat:js, [UIScreen mainScreen].bounds.size.width - 20];

[webView stringByEvaluatingJavaScriptFromString:js];

[webView stringByEvaluatingJavaScriptFromString:@"imgAutoFit()"];

}

咱們這裏獲取了屏幕的寬度，而後設置成圖片的最大寬度爲屏幕的寬度-20。(此方法沒有實踐過，詳情參考 http://www.henishuo.com/webview-img-auto-fit/)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。