笔记：WebView的图片居中问题

作者: RoJacKing | 来源:发表于2018-08-16 15:54 被阅读199次
1、后台给一段json数据（里面是HTML的body数据）
2、WebView加载这段数据(主要是加载图片)
3、Webview展示的内容(主要是图片)要居中，自适应屏幕
WebView webView;
webView = (WebView)findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);//支持js注入
        WebSettings webSettings = webView.getSettings();//获取webview的设置
        //html的图片就会以单列显示就不会变形占了别的位置
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        webSettings.setUseWideViewPort(true); // 将内容调整到适合webview的大小
        webSettings.setLoadWithOverviewMode(true); // 设置加载进来的页面自适应手机屏幕
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return true;
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
               // top4 = F.id(R.id.ll_top4).getView().getTop()-  F.id(R.id.ll_tit_det).getView().getHeight();
            }
        });


主要是以下代码
//后台给的数据
String url = "\n" +
                "  <p style=\"margin:0;width:0;height:0;overflow:hidden;\"><img src=\"http://img.alicdn.com/imgextra/i4/T2s4moXH8XXXXXXXXX-350475995.png?p=recommend_v2_6840830_start_top_1\" /></p> \n" +
                "  <table width=\"750\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" bgcolor=\"#ffffff\" align=\"center\" style=\"width:750.0px;margin:0 auto;line-height:1.5;text-align:left;color:#000000;font-size:12.0px;word-wrap:normal;\"> \n" +
                "   <tbody>\n" +
                "    <tr> \n" +
                "     <td> \n" +
                "      <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\"> \n" +
                "       <tbody>\n" +
                "        <tr> \n" +
                "         <td colspan=\"7\" height=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "        <tr> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i6/TB1u2f8cXuWBuNjSspnYXF1NVXa_M2.SS2_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=565381764227&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i5/TB1_L.ccamWBuNjy1XaYXFCbXXa_M2.SS2_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=565380680096&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i1/TB1hwJAcCBYBeNjy0FeYXHnmFXa_M2.SS2_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=565567762817&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "        <tr> \n" +
                "         <td colspan=\"7\" height=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "        <tr> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i1/889086618/TB2YsD7aYSYBuNjSspfXXcZCpXa_!!889086618.jpg_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=565030012218&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i7/TB1rjOxlY_I8KJjy1XaYXHsxpXa_M2.SS2_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=563868786523&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i7/TB1VUDDXSr85uJjSZPiYXHOBFXa_M2.SS2_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=560134228244&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "        <tr> \n" +
                "         <td colspan=\"7\" height=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "        <tr> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i3/889086618/TB2vtfae6uhSKJjSspjXXci8VXa_!!889086618.jpg_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=559631326666&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i2/889086618/TB2R_YVa29TBuNjy0FcXXbeiFXa_!!889086618.jpg_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=565270371113&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i6/TB1KW9biILJ8KJjy0FnYXIFDpXa_M2.SS2_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=562755256676&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "        <tr> \n" +
                "         <td colspan=\"7\" height=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "       </tbody>\n" +
                "      </table> </td> \n" +
                "    </tr> \n" +
                "   </tbody>\n" +
                "  </table> \n" +
                "  <p style=\"margin:0 0 5.0px 0;width:0;height:0;overflow:hidden;\"><img src=\"http://img.alicdn.com/imgextra/i4/T2s4moXH8XXXXXXXXX-350475995.png?p=recommend_v2_6840830_end_top_1\" /></p>\n" +
                "  <p><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB2e8vOqC3PL1JjSZFxXXcBBVXa_!!889086618.jpg\" align=\"absmiddle\" /></p> \n" +
                "  <p><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2PW9ehaagSKJjy0FhXXcrbFXa_!!889086618.jpg\" align=\"absmiddle\" /></p> \n" +
                "  <p><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2qUIJlwoQMeJjy1XaXXcSsFXa_!!889086618.jpg\" align=\"absmiddle\" /></p> \n" +
                "  <p><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2mPjgllUSMeJjy1zjXXc0dXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2qJSYgvNNTKJjSspfXXbXIFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2IJK2lbsTMeJjSsziXXcdwXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2tm8ZhjihSKJjy0FlXXadEXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2v814lbsTMeJjy1zeXXcOCVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB20W58gvBNTKJjSszeXXcu2VXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2Co1UlbsTMeJjSszdXXcEupXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB2xnaKlgMPMeJjy1XdXXasrXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2u.5LgvBNTKJjSszcXXbO2VXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2ZUPRlgoQMeJjy0FoXXcShVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2NEjulgMPMeJjy1XbXXcwxVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2W8VVhjqhSKJjSspnXXc79XXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2JebDlgMPMeJjy1XcXXXpppXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB2dT9KlgMPMeJjy1XdXXasrXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB28.aKlgMPMeJjy1XdXXasrXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB24q83haagSKJjy0FcXXcZeVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2tvPXlbsTMeJjy1zcXXXAgXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2U2K2lbsTMeJjSsziXXcdwXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2C2nbgvNNTKJjSspcXXb4KVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2PI2klgoQMeJjy1XaXXcSsFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2lZTqlgoQMeJjy0FnXXb8gFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB2Gq03haigSKJjSsppXXabnpXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB28YduhjihSKJjy0FeXXbJtpXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB26CCMllUSMeJjy1zkXXaWmpXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB2u80EhjihSKJjy0FfXXbGzFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2isp3haagSKJjy0FcXXcZeVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2c2YDlgMPMeJjy1XcXXXpppXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB25inrlgoQMeJjy0FpXXcTxpXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB25yvrlgoQMeJjy0FpXXcTxpXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2SFW0lbsTMeJjSszgXXacpFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB2nURZhjuhSKJjSspaXXXFgFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2eXy5lbsTMeJjy1zeXXcOCVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2U3SYlbwTMeJjSszfXXXbtFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2btx3haagSKJjy0FcXXcZeVXa_!!889086618.jpg\" align=\"absmiddle\" /> </p>\n" +
                "  <script src=\"https://g.alicdn.com/i/popshop/0.0.23/p/seemore/load.js?c\"></script> \n" +
                " ";
//解决方法
//将后台给的数据加入一段js函数
        String html = "<html>" +
                "<head>" +
                "<style type=\"text/css\">" +
                "body {font-size:15px;}" +
                "</style>" +
                "</head>" +
                "<body>" +
//-----------------下面是要加的js函数
                "<script type='text/javascript'>" +
                "window.onload = function(){" +

                "for (var i=0;i<document.getElementsByTagName('p').length;i++){ document.getElementsByTagName('p')[i].style.textAlign = 'center' }" +//p标签内容居中

                "var $img = document.getElementsByTagName('img');for(var p in  $img){$img[p].style.width = '100%';$img[p].style.height ='auto'}" +//p标签里面的<img>标签的图片100%大小 长度自适应，也就是居中展示
                "}" +
                "</script>" + 
//-------------------------------------
                  url +
                "</body>" +
                "</html>";

        LogUtil.e(html);

        mWebView.loadDataWithBaseURL("about:blank", html, "text/html", "utf-8", null);
笔记：WebView的图片居中问题

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读
