WebView加載HTML圖片大小自適應與文章自動換行

時間 2019-11-18

標籤 webview 加載 html 圖片大小自適應文章自動換行欄目 HTML 简体版

原文原文鏈接

http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.htmljavascript

在不少App中都會使用到webview，尤爲是在加載新聞內容等文章形式的數據時。由於圖文混編以及不一樣字體格式的顯示，在iOS進行編輯和顯示都是一大問題（固然，iOS中也能夠用CoreText進行繪製），可是對於web端來講，一個富文本編輯器就能夠完美解決這個問題。因此後臺不少時候會直接返回HTML代碼拿給前端解析，這時，在客戶端對HTML代碼的處理就顯得尤其重要了。css

本文將講解在webview加載HTML代碼時，常常會遇到的圖片自適應大小與文章內容自動換行問題。html

示例Demo下載地址：前端

https://github.com/saitjr/WebViewLoadHTMLImageAdaptiveDemo.gitjava

環境信息：ios

Mac OS X 10.10.1git

Xcode 6.1.1github

iOS 8.1web

正文：app

首先看下原圖

原圖大小

在HTML代碼中設置內容樣式，通常使用css或者js，那麼根據加載優先級以及加載效果，能夠自行選擇。

js在頁面加載完以後加載，因此設置圖片樣式的時候，會先加載大圖，而後忽然變小；
css在引入時加載，直接加載縮小的圖片（實際佔用內存不會縮小）；

1、圖片自適應

1. 使用css進行圖片的自適應

在web前端，也就是HTML中，若是隻設置圖片的寬度，那麼高度會根據圖片本來尺寸進行縮放。

若是後臺返回的HTML代碼中，不包含<head>標籤，則能夠直接在HTML字符串前加上一下面的代碼（若是包含<head>，則在<head>標籤內部添加）。代碼含義是，無論用戶之前設置的圖片尺寸是多大，都縮放到寬度爲320px大小。

<head><style>img{width:320px !important;}</style></head>

效果圖：

每張圖都一樣的寬度

若須要根據圖片本來大小，寬度小於320px的不縮放，大於320px的縮小到320px，那麼在HTML字符串前加上一下代碼：

<head><style>img{max-width:320px !important;}</style></head>

效果圖：

超出設定範圍進行縮放

2. 使用js進行圖片的自適應

在webview的代理中，執行js代碼。(下面這段代碼是必須有<head>標籤的)

若是沒有<head>標籤，也很簡單，只須要給返回的HTML字符串前面拼接一個<head></head>便可。

- (void)webViewDidFinishLoad:(UIWebView *)webView { [webView stringByEvaluatingJavaScriptFromString: @"var script = document.createElement('script');" "script.type = 'text/javascript';" "script.text = \"function ResizeImages() { " "var myimg,oldwidth,oldheight;" "var maxwidth=320;"// 圖片寬度 "for(i=0;i <document.images.length;i++){" "myimg="document.images[i];" "="" "if(myimg.width=""> maxwidth){" "myimg.width = maxwidth;" "}" "}" "}\";" "document.getElementsByTagName('head')[0].appendChild(script);"]; [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"]; }

2、文章內容自動換行

文章的自動換行也是經過css實現的，書寫方式圖片縮放相似。在沒有<body>標籤的狀況下，在HTML代碼前，直接拼接如下代碼便可（若包含<body>，則將代碼添加到body標籤內部），意思是所有內容自動換行。

<body width=320px style=\"word-wrap:break-word; font-family:Arial\">

到這裏，最基本的圖片自適應與文章自動換行就結束了，這其中還會引伸出不少實用的技術，例如iOS8中的WKWebView、JSBinding、CommonJS、iOS端使用HTML模板引擎等，我也會在接下來的文章中，一一介紹。

ios js webview

« 【iOS】開發經常使用命令

【iOS】使用safari對webview進行調試 »

6 Responses to 「【iOS】WebView加載HTML圖片大小自適應與文章自動換行」

MainasuK

2015年8月10日上午11:58

終於找到解決方法了，感謝。不過，腳本中間掉東西了哦，從中間的 for 開始你看～「var script = document.createElement(‘script’);」「script.type = ‘text/javascript’;」「script.text = \」function ResizeImages() { 」「var myimg,oldwidth,oldheight;」「var maxwidth=320;」// 圖片寬度「for(i=0;i maxwidth){」「myimg.width = maxwidth;」「}」「}」「}\」;」「document.getElementsByTagName(‘head’)[0].appendChild(script);」