[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
范例下載
范例下載:點此下載