首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

Android 顯示 JSON 封裝的 HTML 富文本(含圖片/超連結):WebView + 圖片載入攔截

     編輯:程式設計綜合問答

場景

Server 回傳 JSON:`{ "content": "

文字

連結" }`。客戶端需完整渲染 HTML、圖片、點擊連結跳轉。

核心方案:WebView + 自定義 WebViewClient

WebView webView = findViewById(R.id.webview);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);
settings.setLoadWithOverviewMode(true);
settings.setUseWideViewPort(true);
// 允許 HTTP/HTTPS 混合內容 (API 21+)
if (Build.VERSION.SDK_INT >= 21) settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        String url = request.getUrl().toString();
        if (url.startsWith("https://") || url.startsWith("https://")) {
            // 內部打開或外部瀏覽器
            view.loadUrl(url); // 或 startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
            return true;
        }
        return super.shouldOverrideUrlLoading(view, request);
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        // 可選:注入 CSS 調整圖片自適應
        view.loadUrl("javascript:(function() { " +
            "var imgs = document.getElementsByTagName('img'); " +
            "for (var i=0; i

關鍵點

  • `loadDataWithBaseURL(null, html, "text/html", "UTF-8", null)`:正確解析 HTML 字串,`baseUrl=null` 表示相對路徑圖片需轉絕對或用 `cid:` 協定。
  • `shouldOverrideUrlLoading`:攔截超連結點擊,決定 App 內打開或外部瀏覽器。
  • **圖片載入問題**:若 HTML 含相對路徑 ``,需:
    1. Server 回傳**絕對 URL**(含 domain)。
    2. 或客戶端正則替換 `src="/upload/` → `src="https://your.domain/upload/` 再載入。
    3. 或實作 `WebViewClient.shouldInterceptRequest` 攔截圖片請求,自行下載並回傳 `WebResourceResponse`(支援離線/快取/驗證)。
  • **大圖縮放**:`settings.setBuiltInZoomControls(true)` + `settings.setDisplayZoomControls(false)`。

替代方案:TextView + ImageGetter(僅簡單富文本)

若 HTML 結構極簡(無複雜 CSS/JS),可用 `Html.fromHtml(html, imageGetter, null)` 配合 `ImageGetter` 非同步下載圖片插入 `TextView`。但**不支援超連結點擊攔截、CSS 佈局、JS 互動**,複雜頁面請直接用 WebView。

總結

JSON 承載 HTML 富文本 → **WebView 是標準解法**。關鍵在於 `loadDataWithBaseURL` 載入、圖片 URL 絕對化/攔截、連結點擊攔截、CSS 注入自適應。參考:Sina Blog 範例。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved