[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
范例下载
范例下载：点此下载
时间： 2024-08-02 15:59:15