[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. 18．实现如下类之间的继承关系，并编写Music类来测试这些类。

    package zhongqiuzuoye; public class Instrument { public void play() { System.out.println("弹奏乐器& ...

  2. 简单的跨平台c/c++日志记录

    CLog.h #include <stdlib.h> #pragma once #ifndef _CLOG #define _CLOG #define CLOG_DEBUG 0 #defi ...

  3. Design4：数据库设计规范

    当数据模型从概念层转到逻辑层时,需要进行规范化设计.要想设计一个结构合理的关系型数据库,至少需要满足1NF,2NF,3NF,即第一范式,第二范式,第三范式. 1,1NF(原子性) 1NF是最基本的,数 ...

  4. Jquery实现AJAX拦截

    前几天项目需要实现一个AJAX拦截,于是就用jquery写了一个,这里分享一下. 需求是这样的,ajax不是我来写,所有说我是不能动ajax的,并且我也不知道什么时候它会发生,为了方便项目经理让我把它 ...

  5. silverlight MouseLeftButtonDown事件总是无法触发

    参考解决办法:http://www.cnblogs.com/tianguook/archive/2011/05/13/2045299.html 在构造函数中首先添加一个事件: public BtnLi ...

  6. ASP.NET MVC TagBuilder使用

    ASP.NET MVC在需要进行新建HTML辅助方法时,可以来使用TagBuilder类. TagBuilder类常用方法: 方法名称 说明 AddCssClass() 可在卷标中添加一个新的Clas ...

  7. CAD2015安装教程 AutoCAD2015中文版安装激活图文教程

    28年来,Autodesk一直在坚持不懈地帮助客户提高设计流程效率.AutoCAD提供了可靠的三维自由形状设计工具以及强大的绘图和文档制作功能,在全球拥有数百万用户. autocad2015具有广泛的 ...

  8. JavaScript作用域原理（一）——作用域链

    一.作用域的描述 JavaScript权威指南中对作用域有一句很精辟的描述:“JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.” 在JavaScript中,作用域的 ...

  9. Deep learning：四十三(用Hessian Free方法训练Deep Network)

    目前,深度网络(Deep Nets)权值训练的主流方法还是梯度下降法(结合BP算法),当然在此之前可以用无监督的方法(比如说RBM,Autoencoder)来预训练参数的权值,而梯度下降法应用在深度网 ...

  10. Nodejs学习笔记（四）——支持Mongodb

    前言:回顾前面零零碎碎写的三篇挂着Nodejs学习笔记的文章,着实有点名不副实,当然,这篇可能还是要继续走着离主线越走越远的路子,从简短的介绍什么是Nodejs,到如何寻找一个可以调试的Nodejs ...