[Tool] Chrome内的本地网页，使用XMLHttpRequest读取本地档案
[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读取本地档案的更多相关文章
- [Android] WebView内的本地网页，使用XMLHttpRequest读取本地档案
[Android] WebView内的本地网页,使用XMLHttpRequest读取本地档案 问题情景 在Android里,可以使用WebView来呈现本地或是远程的网页内容.但是在显示本地网页时,如 ...
- android中使用WebView请求本地网页
使用WebView的方式请参考我的上一篇文章:android中使用WebView请求网页 这里说一下请求本地网页的方法: 本地网页应该把网页保存在src/main/assets目录下: webView ...
- Chrome内核浏览器打开网页报 错误代码： ERR_TIMED_OUT
升级win10之后如果出现chrome内核的浏览器网页总是打不开 打开很慢 而ie和edge是可以正常访问的 用这个方法可以 我弄了几天终于 搞好了我直接转载过来了近期,工程师收到大量反馈360浏 ...
- Qt(QtWebEngine)加载本地网页跨域问题的总结
目录 1. 概述 2. 详论 2.1. 传参 2.2. JS module 3. 建议 4. 参考 1. 概述 浏览器直接加载本地网页的时候,如果网页涉及到加载本地资源(如图片),会出现跨域的问题.Q ...
- HTML-图片热点、网页内嵌、网页拼接、快速切图
图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.与图片链接不同,热点是图片上的某一个区域或多个区域. 我们用魔兽世界图片来做一个图片热点,点击logo.区域和不 ...
- Chrome模拟手机浏览网页
用Chrome模拟手机浏览网页,只需要编辑一个命令就可以实现 C:\Users\xxx\AppData\Local\Google\Chrome\Application\chrome.exe --use ...
- DevTools：Chrome 内置调试工具
DevTools:Chrome 内置调试工具 2016-08-29 https://developers.google.com/web/tools/chrome-devtools
- 安卓开发笔记（二十二）：读取本地（内置）html文件并实现和Javascript交互
实际上我们通常是使用WebView控件对本地html进行读取,这样就可以体会类似web app和安卓原生混合开发的乐趣了.在读取本地html并展示在前台的时候,并不需要在Androidmenifast ...
- 通过chrome console 快速获取网页连接
通过chrome console 快速获取网页连接 var ip = document.getElementsByClassName("jDesc"); var str = &qu ...
随机推荐
- SSRS2：Reporting Service 配置Service Account
1,Service Account SSRS以一个Service方式实现,有三部分组成:Web Service,Report Manager和一个后台的进程,这个Service运行的账号就是Servi ...
- 【WP开发】在手机屏幕点亮时播放声音
今天说的内容有点流氓,请诸君在开发应用时谨慎使用. 那么,这活儿到底有多流氓呢? 先介绍一下要实现的功能:当用户按电源键(也可以是双击屏幕)点亮手机的屏幕时播放一下短音乐,而且应用程序可以不在前台运行 ...
- 利用跨域请求来隐藏firbug控制台中的Ajax请求
本文链接:http://www.orlion.ml/63/ 普通jquery的Ajax请求在控制台中是可见的,如下: 而在利用jsonp(json with padding)进行Ajax跨域时,发现A ...
- IllegalStateException : Web app root system property already set to different value问题详解
一.问题描述 最近公司有了一个新项目,这个项目最近部署到测试服务器上的时候出现了一个问题. 严重: Exception sending context initialized event to ...
- javase基础复习攻略《一》
作为一名软件工程专业,JAVA开发方向的大三本科学生,有必要把自己的学到的专业知识进行一下整理,一则方便自己了解自己的学习程度,二则帮助刚刚接触这一门语言的童鞋了解学习,本人来自与河南理工大学,介绍完 ...
- ES6入门系列三（特性总览下）
0.导言 最近从coffee切换到js,代码量一下子变大了不少,也多了些许陌生感.为了在JS代码中,更合理的使用ES6的新特性,特在此对ES6的特性做一个简单的总览. 1.模块(Module) --C ...
- Java多线程系列--“JUC线程池”01之 线程池架构
概要 前面分别介绍了"Java多线程基础"."JUC原子类"和"JUC锁".本章介绍JUC的最后一部分的内容——线程池.内容包括:线程池架构 ...
- Android基于mAppWidget实现手绘地图（九）–如何处理地图对象的touch事件
为了响应touch事件,需要设置OnMapTouchListener 示例: private void initMapEventsListener() { mapWidget.setOnMapTouc ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十八】
<Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Windows Azure Virtual Network (10) 使用Azure Access Control List(ACL)设置客户端访问权限
<Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的China Azure. 我们在创建完Windows Azure Virtual Machi ...