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

问题情景

开发Cordova这类以网页内容作为UI的Hybrid APP时，开发人员可以使用IDE的功能将程序布署到手机或是仿真器来侦错。但是以笔者的经验来说，要检视HTML网页元素、观看CSS样式继承，最顺手的开发者工具还是Chrome。这时如果开发人员选择透过Chrome来模拟Hybrid APP，以档案方式加载本地网页来侦错，并且在网页里使用了XMLHttpRequest来额外加载本地档案(ex:AngularJS里Route功能的TemplateURL)，在Chrome上会呈现下列的错误讯息：

Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Clark/Desktop/XhrFileAccessSample/content.txt'.

发生这个错误的原因，是因为Chrome基于安全性的考虑，禁止本地网页使用XMLHttpRequest来读取本地档案。这也就造成了相同的HTML页面内容，布署到手机或者仿真器可以正常使用XMLHttpRequest，而在Chrome上执行却无法正常使用XMLHttpRequest。

解决方案

为了让Chrome上执行的本地网页，也能正常使用XMLHttpRequest来读取本地档案内容。开发人员可以在启动Chrome的快捷方式上，加入「--allow-file-access-from-files」参数，来开启XMLHttpRequest读取档案功能。后续使用这个快捷方式开启Chrome执行本地网页，就可以正常使用XMLHttpRequest来读取本地档案内容。

  • 快捷方式设定

  • index.html

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

    <h1 id="displayBox"></h1>

    <script>

        // DisplayBox
    
        function display(message) {
    
            var displayBox = document.getElementById("displayBox");
    
            displayBox.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>

  • content.txt

    Clark

范例下载

范例下载：点此下载

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

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

    [Android] WebView内的本地网页,使用XMLHttpRequest读取本地档案 问题情景 在Android里,可以使用WebView来呈现本地或是远程的网页内容.但是在显示本地网页时,如 ...

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

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

  3. Chrome内核浏览器打开网页报 错误代码： ERR_TIMED_OUT

    升级win10之后如果出现chrome内核的浏览器网页总是打不开 打开很慢  而ie和edge是可以正常访问的 用这个方法可以  我弄了几天终于 搞好了我直接转载过来了近期,工程师收到大量反馈360浏 ...

  4. Qt(QtWebEngine)加载本地网页跨域问题的总结

    目录 1. 概述 2. 详论 2.1. 传参 2.2. JS module 3. 建议 4. 参考 1. 概述 浏览器直接加载本地网页的时候,如果网页涉及到加载本地资源(如图片),会出现跨域的问题.Q ...

  5. HTML-图片热点、网页内嵌、网页拼接、快速切图

    图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.与图片链接不同,热点是图片上的某一个区域或多个区域. 我们用魔兽世界图片来做一个图片热点,点击logo.区域和不 ...

  6. Chrome模拟手机浏览网页

    用Chrome模拟手机浏览网页,只需要编辑一个命令就可以实现 C:\Users\xxx\AppData\Local\Google\Chrome\Application\chrome.exe --use ...

  7. DevTools：Chrome 内置调试工具

    DevTools:Chrome 内置调试工具 2016-08-29 https://developers.google.com/web/tools/chrome-devtools

  8. 安卓开发笔记（二十二）：读取本地（内置）html文件并实现和Javascript交互

    实际上我们通常是使用WebView控件对本地html进行读取,这样就可以体会类似web app和安卓原生混合开发的乐趣了.在读取本地html并展示在前台的时候,并不需要在Androidmenifast ...

  9. 通过chrome console 快速获取网页连接

    通过chrome console 快速获取网页连接 var ip = document.getElementsByClassName("jDesc"); var str = &qu ...

随机推荐

  1. 理解与模拟一个简单web服务器

    先简单说下几个概念,根据自己的理解,不正确请见谅. web服务器 首先要知道什么是web服务器,简单说web服务器就是可以使用HTTP传输协议与客户端进行通信的服务器.最初的web服务器只能用来处理静 ...

  2. png图片制作任意颜色的小图标

    本内容只要是对张鑫旭PNG格式小图标的CSS任意颜色赋色技术的这篇文章进行详细说明. HTML: <i class="icon"><i class="i ...

  3. 关于OnEraseBkgnd和OnPaint的转载

    问题是这样产生的.在OnEraseBkGnd中,如果你不调用原来缺省的OnEraseBkGnd只是重画背景则不会有闪烁.而在OnPaint里面, 由于它隐含的调用了OnEraseBkGnd,而你又没有 ...

  4. OpenCascade Matrix

    OpenCascade Matrix eryar@163.com 摘要Abstract:本文对矩阵作简要介绍,并结合代码说明OpenCascade矩阵计算类的使用方法. 关键字Key Words:Op ...

  5. struts2获取web元素(request、session、application)

    一.Action中获取 第一种方式: 通过ActionContext,这种方式取到的对象是Map类型 import java.util.Map; import com.opensymphony.xwo ...

  6. ASProtect注册码使用教程|ASProtect SKE(加壳脱壳工具) 2.56 汉化注册版

    ASProtect 是功能非常完善的加壳.加密保护工具.能够在对软件加壳的同时进行各种保护.如:反调试跟踪.自校验及用密钥加密保护等:还有多种限制使用措施,如:使用天数限制.次数限制及对应的注册提醒信 ...

  7. Android基于mAppWidget实现手绘地图（十四）–在一个应用中使用多个地图

    使用切图工具创建不同名称的地图资源.然后将这些资源放置到assert文件夹内. 像下面这样: 在代码中,根据不同的地图名称,查找地图. map = new MapWidget(this, " ...

  8. android.os.networkonmainthreadexception怎么解决

    在android2.3以后,在主线程中必须使用另一个线程,如handler机制,或者异步任务获取网络数据. 如果你的访问网络操作必须放在主线程中执行,那么在onCreate()中添加 if (GetV ...

  9. 深入浅出JSONP--解决ajax跨域问题

    取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过ajax异步从那个后台程序中 ...

  10. Windows Azure Cloud Service (11) PaaS之Web Role, Worker Role(上)

    <Windows Azure Platform 系列文章目录> 本文是对Windows Azure Platform (六) Windows Azure应用程序运行环境内容的补充. 我们知 ...