zoukankan      html  css  js  c++  java
  • [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
      

    范例下载

    范例下载:点此下载

  • 相关阅读:
    mysql实现主从复制
    go get时候 timeout
    linux 修改/etc/profile文件之后 没有效果
    初试 laravel
    php 实现单个大文件(视频)的 断点上传
    UEditor图片左对齐右对齐 要的作用显示之后 保存之后没有效果
    docker 实现 mysql+nginx+php
    redis
    easyPoi框架的excel导入导出
    从生产计划的角度认识精益生产
  • 原文地址:https://www.cnblogs.com/clark159/p/4688912.html
Copyright © 2011-2022 走看看