[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來讀取本地檔案內容。

  • 快捷方式設定

    解決方案01

  • 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
    

范例下載

范例下載:點此下載


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM