Chrome中使用XMLHttpRequest讀取本地檔案

hztj2005 2017-05-19 10:13:25

在下面网页中有，Chrome中使用XMLHttpRequest讀取本地檔案的方法：
https://dotblogs.com.tw/clark/archive/2015/07/30/153002.aspx
在網頁裡使用了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

...全文

536 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

咖喱玫瑰 2020-04-12

打赏
举报

JS文档无法用chrome,在快捷键内页增加了--allow-file-access-from-files，还是chrome还是不能显示文件图片，报错内容跟之前一样，请问是什么原因？具体代码如下： <html> <body> <head> <title>D3力导向 </title> <meta charset="utf-8" /> </head> <script src="http://cuc.yingshinet.com/d3.v3.min.js "></script> <script> var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; w=w*0.98; h=h*0.98; var color=d3.scale.category20(); var force=d3.layout.force() .charge(-120) .linkDistance(100) .size([w,h]); var svg=d3.select("body") .append("svg") .attr("width",w) .attr("height",h) d3.json("a.json",function(error,graph){ console.log(graph); var node=svg.selectAll(".node") .data(graph.node) .enter() .append("circle") .attr("class","node") .attr("r",16) .attr("cx",100) .attr("cy",100) .style("fill","blue") .call(force.drag); }) </script> </body> </html>

hztj2005 2017-05-19

打赏
举报

引用 1 楼 jslang 的回复:

方法是正确的，不能显示可能是你操作的问题，比如，不能双击index.html打开，要先打开加了参数的Chrome快捷方式，然后用Ctrl+O打开index.html

谢谢！我把这个--allow-file-access-from-files 参数加在一个快捷方式，然后从桌面打开，可能由于桌面这个快捷方式没有这个参数，所以本地文本数据读不出来。以为有什么不对，折腾了一下午，去改代码。你这一提醒，我重新加参数，就可以了。注意--allow-file-access-from-files 前面要有空格。