1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Android WebView 加载富文本内容

Android WebView 加载富文本内容

时间:2018-10-22 03:44:37

相关推荐

Android WebView 加载富文本内容

WebView加载数据的方式有两种:

1. webView.loadUrl(data);//加载url2. webView.loadDataWithBaseURL(null,data, "text/html" , "utf-8", null);//加载html数据

可以使用来加载富文本内容:

webView.loadDataWithBaseURL(null,data, "text/html" , "utf-8", null);

为了使WebView在手机上能更好的展示富文本内容,推荐如下的WebSetting:

WebSettings settings = webView.getSettings();// 设置WebView支持JavaScriptsettings.setJavaScriptEnabled(true);//支持自动适配settings.setUseWideViewPort(true);settings.setLoadWithOverviewMode(true);settings.setSupportZoom(true); //支持放大缩小settings.setBuiltInZoomControls(true); //显示缩放按钮settings.setBlockNetworkImage(true);// 把图片加载放在最后来加载渲染settings.setAllowFileAccess(true); // 允许访问文件settings.setSaveFormData(true);settings.setGeolocationEnabled(true);settings.setDomStorageEnabled(true);settings.setJavaScriptCanOpenWindowsAutomatically(true);/// 支持通过JS打开新窗口settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//设置不让其跳转浏览器webView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {return false;}});// 添加客户端支持webView.setWebChromeClient(new WebChromeClient());// mWebView.loadUrl(TEXTURL);//不加这个图片显示不出来if (Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);}webView.getSettings().setBlockNetworkImage(false);//允许cookie 不然有的网站无法登陆CookieManager mCookieManager = CookieManager.getInstance();mCookieManager.setAcceptCookie(true);mCookieManager.setAcceptThirdPartyCookies(webView, true);webView.loadUrl(URL);

补充:

当我们使用WebView加载富文本网页文件时,可能存在某些机型上展示内容乱码的问题。

解决方案:

1.首先设置html头文件为 utf-8,示例代码如下:

<head><title>这是标题</title><meta name="content-type" content="text/html; charset=utf-8"><meta http-equlv="Content-Type" content="text/html;charset=utf-8"></head>

2. 其次保证webView设置的编码与html设置编码一致:

webview.getSettings().setDefaultTextEncodingName("utf-8");

3.修改富文本样式适配屏幕

html示例代码:

<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>img{max-width: 100%; width:100%; height:auto;}*{margin:0px;}</style></head><body><p style="text-align: left;"><img src="/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1383902695,1129447956&fm=26&gp=0.jpg"title="1541054054758015328.jpg" alt="1.jpg" /><img src="/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2353449440,2528668120&fm=26&gp=0.jpg"title="1541054057414099008.jpg" alt="2.jpg" /><img src="/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3446458559,1680525880&fm=26&gp=0.jpg"title="1541054060899024343.jpg" alt="3.jpg" /></p></body></html>

将代码结合富文本进行动态修改富文本样式:

private String getHtmlData(String bodyHTML) {String head = "<head>"+ "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"> "+ "<style>img{max-width: 100%; width:100%; height:auto;}*{margin:0px;}</style>"+ "</head>";return "<html>" + head + "<body>" + bodyHTML + "</body></html>";}

显示如下:

4.设置取消四周空白

public static String getNewContent(String htmltext) {Document doc = Jsoup.parse(htmltext);Elements head = doc.getElementsByTag("head");head.get(0).html("<style>*,body,html,div,p,img{border:0;margin:0;padding:0;} </style>");// Elements elements = doc.getElementsByTag("img");// for (Element element : elements) {// element.attr("width", "100%").attr("height", "auto");// }return doc.toString();}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。