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

jopen 9年前發布 | 28K 次閱讀 WebView iOS開發 移動開發

在很多App中都會使用到webview，尤其是在加載新聞內容等文章形式的數據時。因為圖文混編以及不同字體格式的顯示，在iOS進行編輯和顯示都是一大問題（當然，iOS中也可以用CoreText進行繪制），但是對于web端來說，一個富文本編輯器就可以完美解決這個問題。所以后臺很多時候會直接返回HTML代碼拿給前端解析，這時，在客戶端對HTML代碼的處理就顯得尤為重要了。

在HTML代碼中設置內容樣式，一般使用css或者js，那么根據加載優先級以及加載效果，可以自行選擇。

  • js在頁面加載完之后加載，所以設置圖片樣式的時候，會先加載大圖，然后突然變小；

    </li>

  • css在引入時加載，直接加載縮小的圖片（實際占用內存不會縮小）；

    </li> </ul>

    一、圖片自適應

    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;"http:// 圖片寬度
         "for(i=0;i  maxwidth){"
                 "myimg.width = maxwidth;"
             "}"
         "}"
     "}\";"
     "document.getElementsByTagName('head')[0].appendChild(script);"];
    [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
}

    二、文章內容自動換行

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

    <body width=320px style=\"word-wrap:break-word; font-family:Arial\">
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！