Android中WebView加載sdcard中的html顯示

場景

Android中使用WebView加載本地html並支持運行JS代碼和支持縮放：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118637633

上面實現webview加載顯示html是將其放在安裝包內，即代碼結構下assets目錄下

 

 

如果html中需要訪問的靜態資源，比如照片資源需要更換或者照片資源特別多時，對於安裝包打包和更換維護都不方便。

如果可以將html以及其他資源放在手機所在的sdcard中，會很方便。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、設置webview支持訪問文件數據

        WebSettings settings = webView.getSettings();
        // 設置允許訪問文件數據
        settings.setAllowFileAccess(true);
        settings.setAllowContentAccess(true);

2、app授予訪問文件的權限

在AndroidManifest.xml中，添加權限

    <!--  從SDCard讀取數據權限 -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

 

 

3、將html以及需要的image、js等資源復制到手機的文件管理器sdcard某目錄下

 

 

這里使用的是模擬器，注意sdcard的目錄的獲取

 

 

這里的html的路徑是

sdcard/map/offLineTileMap.html

3、webview中加載html的路徑修改為

webView.loadUrl("file:///mnt/sdcard/map/offLineTileMap.html");

4、activty的完整代碼

package com.badao.androidstudydemo;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;

public class WebViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
        //獲取webview
        WebView webView = findViewById(R.id.webview);
        //設置為ChromeClinet 才能執行js代碼
        WebChromeClient webChromeClient = new WebChromeClient();
        webView.setWebChromeClient(webChromeClient);
        //增加JS接口
        //webView.addJavascriptInterface(this,"badao");
        WebSettings settings = webView.getSettings();
        //設置開啟js支持
        settings.setJavaScriptEnabled(true);
        // 是否支持縮放
        settings.setSupportZoom(true);
        //解決跨域問題
        settings.setAllowFileAccessFromFileURLs(true); //Maybe you don't need this rule
        settings.setAllowUniversalAccessFromFileURLs(true);
        // 設置允許訪問文件數據
        settings.setAllowFileAccess(true);
        settings.setAllowContentAccess(true);
        //加載本地html
        //加載在線json顯示地圖
        //webView.loadUrl("file:///android_asset/onLineGeoJsonMap.html");
        //加載離線json
        //webView.loadUrl("file:///android_asset/offLineGeoJsonMap.html");
        //加載本地sdcard中html文件
        webView.loadUrl("file:///mnt/sdcard/map/offLineTileMap.html");
    }
    //JS調用Android方法
    @JavascriptInterface
    public void jsCallAndroid()
    {
        Toast.makeText(this,"JS調用Android方法成功",Toast.LENGTH_LONG).show();
    }
}

 

5、運行效果