[Tool] Chrome内的本地网页,使用XMLHttpRequest读取本地档案

本文介绍了解决Chrome浏览器限制本地网页使用XMLHttpRequest访问本地文件的问题。通过在Chrome启动参数中添加--allow-file-access-from-files,使得开发者能够在Chrome中调试混合应用时,正常利用XMLHttpRequest加载本地资源。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[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
    

范例下载

范例下载:点此下载

转载于:https://www.cnblogs.com/clark159/p/4688912.html

在浏览器环境中,由于安全限制,我们不能直接读取本地文件系统中的 JSON 文件,但我们可以使用 `fetch` 或者旧版的 `XMLHttpRequest` 来从本地静态资源(比如放在同一目录下的 HTML、CSS 或 JavaScript 文件中)加载 JSON 数据。这里是一个使用 `fetch` 示例: 首先,在同一个目录下创建一个名为 `bandWidthData.json` 的 JSON 文件,例如: ```json { "ports": [ {"id": 1, "bandwidth": 100}, {"id": 2, "bandwidth": 200} ] } ``` 然后在 JavaScript 代码中,你可以这样读取这个 JSON 文件: ```javascript function loadLocalJsonFile(filename) { return fetch(filename) .then(response => response.json()) // 解析 JSON 内容 .catch((error) => { throw new Error(`Failed to fetch local JSON file. ${error}`); }); } // 调用函数并处理返回的数据 loadLocalJsonFile('bandWidthData.json') .then(data => { console.log(data.ports); // 打印 JSON 对象的内容 }) .catch(error => { console.error('Error:', error); }); ``` 如果你使用的是旧版本的 XMLHttpRequest,可以这样做: ```javascript function loadLocalJsonFileWithXHR(filename) { const xhr = new XMLHttpRequest(); xhr.open("GET", filename, true); xhr.onload = function () { if (xhr.status === 200) { try { const data = JSON.parse(xhr.responseText); console.log(data.ports); } catch (error) { console.error('Error parsing JSON:', error); } } else { console.error('Request failed. Returned status of ' + xhr.status); } }; xhr.onerror = function () { console.error('There was a problem with the request.'); }; xhr.send(); } // 调用函数 loadLocalJsonFileWithXHR('bandWidthData.json'); ``` 这两个示例都是假设 JSON 文件在同源策略允许的范围内,即它们都在相同的域名或路径下。在实际生产环境中,通常会将数据放在服务器上,而不是直接在客户端使用本地文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值