[Android] WebView内的本地网页，使用XMLHttpRequest读取本地档案

问题情景

在Android里，可以使用WebView来呈现本地或是远程的网页内容。但是在显示本地网页时，如果开发人员在网页里使用了XMLHttpRequest来额外加载本地档案(ex:AngularJS里Route功能的TemplateURL)，在部分手机上会呈现下列的错误讯息：

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。

解决方案

为了让Android 4.1之后的本地网页，也能正常使用XMLHttpRequest来读取本地档案内容。开发人员可以依照下列程序代码的方式，使用WebView原生提供的「AllowFileAccessFromFileURLs」函式，来重新开启XMLHttpRequest读取档案功能，后续在WebView中执行的本地网页就可以正常使用XMLHttpRequest来读取本地档案内容。

  • MainActivity.java

    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.html

    <!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>

范例下载

范例下载：点此下载

参考数据

[Android] WebView内的本地网页，使用XMLHttpRequest读取本地档案的更多相关文章

  1. [Tool] Chrome内的本地网页，使用XMLHttpRequest读取本地档案

    [Tool] Chrome内的本地网页,使用XMLHttpRequest读取本地档案 问题情景 开发Cordova这类以网页内容作为UI的Hybrid APP时,开发人员可以使用IDE的功能将程序布署 ...

  2. Android WebView访问SSL证书网页（onReceivedSslError）

    Android WebView访问https SSL证书网页,如淘宝,需要在onReceivedSslError添加SSL支持 webview.setWebViewClient(new WebView ...

  3. android WebView控件显示网页

    有时需要app里面显示网页,而不调用其他浏览器浏览网页,那么这时就需要WebView控件.这个控件也是很强大的,放大,缩小,前进,后退网页都可以. 1.部分方法 //支持javascriptweb.g ...

  4. Android webView打不开网页的解决办法

    在我们开发过程中,有可能会遇到webview有些网页打不开的问题.这可能是设置的不对,下面就是解决办法. 进行如下设置吧,大多数情况都能解决! displayWebview.getSettings() ...

  5. Android webview 退出关闭声音 网页调用javascript

    关闭声音,目前没有好的办法,可以参考网络上的实用webview.reload(); @Override protected void onResume() { // TODO Auto-generat ...

  6. Android WebView组件 访问部分网页崩溃问题【已解决】

    最近刚接触Android,在测试WebView组件时发现总是出现崩溃现像: 提示:ERR_CLEARTEXT_NOT_PERMITTED 当时以为是权限问题,查找自己的AndroidManifest文 ...

  7. android webview无法加载网页

    主要原因是没有在AndroidManifest.xml里面设置如下: <user-permission android:name="android.permission.INTERNE ...

  8. Android webview 加载https网页显示空白

    http://www.2cto.com/kf/201110/108836.html 这个网址讲的不错. 设置webview支持https的方法: webView.setWebViewClient(ne ...

  9. android中使用WebView请求本地网页

    使用WebView的方式请参考我的上一篇文章:android中使用WebView请求网页 这里说一下请求本地网页的方法: 本地网页应该把网页保存在src/main/assets目录下: webView ...

随机推荐

  1. SQL Server 2014云特性：无缝集成公有云

    本篇是我在IT168的约稿,原文地址:http://tech.it168.com/a2014/0620/1637/000001637358_all.shtml       IT行业已经进入了云时代,未 ...

  2. Node.js的学习--使用cheerio抓取网页数据

    打算要写一个公开课网站,缺少数据,就决定去网易公开课去抓取一些数据. 前一阵子看过一段时间的Node.js,而且Node.js也比较适合做这个事情,就打算用Node.js去抓取数据. 关键是抓取到网页 ...

  3. 使用Ambari安装hadoop集群

    最近需要做些spark的工作,所以弄了几台dell7500就这么准备开始搭建集群,之前用过几台更破的台式机搭建过一次,折腾了半个月之久,终于成功搭建,这次不想走老路,所以网上查了一下,发现一个神器AM ...

  4. JS魔法堂：剖析源码理解Promises/A规范

    一.前言 Promises/A是由CommonJS组织制定的异步模式编程规范,有不少库已根据该规范及后来经改进的Promises/A+规范提供了实现 如Q, Bluebird, when, rsvp. ...

  5. H5游戏开发之抓住小恐龙

    第一次写技术性博文,以前都只是写一些生活感想,记录一些生活发生的事情. 博主大三学生一枚,目前学习JS一年多,还处于学习阶段,有什么说的不好的希望大牛指点下,由于第一次写博文,排版什么的有待改进,希望 ...

  6. Android基于mAppWidget实现手绘地图（一）--简介

    http://lemberg.github.io/mappwidget/user_guide.html 最近在看一些导游类应用,发现一些景区的导览图使用的完全是自定义地图,也就是手绘地图.这种小范围使 ...

  7. Jeet – 先进，直观，灵活的 CSS 网格系统

    Jeet 是一个先进的,直观的 CSS 网格系统.通过使用预处理器的强大功能,我们现在可以通过实际分数(或者浮点数)来生成一个基于百分比宽度和间隔的网格.让你用更少的代码,更快的速度构建页面布局. 您 ...

  8. 原创：新手布局福音！微信小程序使用flex的一些基础样式属性

    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...

  9. 【GIT】Github上传本地代码详解

    本教程结合Github服务端和客户端完成本地代码上传至Github,下面进行详细讲解: 1.创建Github账号,这一个步骤应该不用太多解释,直接上官网进行注册登录即可https://github.c ...

  10. flexbox简介

    flexbox简介 什么是flexbox flexbox是一种新的布局方式,这种布局方式是2009年W3C提出的方案.它可以简便,完整,完成页面的布局.目前,它已经得到所有浏览器的支持. 但是flex ...