[Android] WebView內的本地網頁，使用XMLHttpRequest讀取本地檔案

時間 2019-11-11

標籤 android webview 本地網頁使用 xmlhttprequest 讀取欄目 Android 简体版

原文原文鏈接

[Android] WebView內的本地網頁，使用XMLHttpRequest讀取本地檔案

問題情景

在Android裏，能夠使用WebView來呈現本地或是遠程的網頁內容。可是在顯示本地網頁時，若是開發人員在網頁裏使用了XMLHttpRequest來額外加載本地檔案(ex:AngularJS裏Route功能的TemplateURL)，在部分手機上會呈現下列的錯誤訊息：html

Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///android_asset/content.txt'.

發生這個錯誤的緣由，是由於Android基於安全性的考慮，從Android 4.1版開始禁止了WebView內的本地網頁使用XMLHttpRequest來讀取本地檔案(4.1版以前無限制)。這也就形成了「Android 4.1以前的手機」能夠正常使用XMLHttpRequest，而「Android 4.1以後的手機」沒法正常使用XMLHttpRequest。java

解決方案

爲了讓Android 4.1以後的本地網頁，也能正常使用XMLHttpRequest來讀取本地檔案內容。開發人員能夠依照下列程序代碼的方式，使用WebView原生提供的「AllowFileAccessFromFileURLs」函式，來從新開啓XMLHttpRequest讀取檔案功能，後續在WebView中執行的本地網頁就能夠正常使用XMLHttpRequest來讀取本地檔案內容。android

MainActivity.javagit

public class MainActivity extends Activity {

    @SuppressLint({ "SetJavaScriptEnabled", "NewApi" }) 
    @Override
    protected void onCreate(Bundle savedInstanceState) {

        // base
        super.onCreate(savedInstanceState);

        // content
        setContentView(R.layout.activity_main);

        // Browser
        android.webkit.WebView webView = (WebView)this.findViewById(R.id.webView1);   

        // WebSettings
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN) {
            settings.setAllowFileAccessFromFileURLs(true);
        }

        // LoadUrl
        webView.loadUrl("file:///android_asset/index.html");      
    }
}

index.htmlgithub

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <h1 id="contentBox"></h1>

    <script>

        // ContentBox
        function display(message) {
            var contentBox = document.getElementById("contentBox");
            contentBox.innerHTML = message;
        }        

        // XMLHttpRequest
        var xhr = new XMLHttpRequest();

        xhr.onload = function () {            
            display(xhr.responseText);
        };

        try {
            xhr.open("get", "content.txt", true);
            xhr.send();
        }
        catch (ex) {
            display(ex.message);
        }        

    </script>
</body>
</html>