[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
范例下载
范例下载:点此下载