title: How to load a txt/csv file into javascript string/array while offline
body: <p>I have a small html/javascript webpage that I want to run in a browser offline.</p>
  
  <p>In the same way the page can include an image or a css file and use it while offline, I want to include a 3mb spreadsheet that the javascript reads into a 2d-array, and I'm hoping for something that would work on IE8 as well as modern browsers.</p>
  
  <pre><code>C:\Folder\index.html
  C:\Folder\code.js
  C:\Folder\picture.png
  C:\Folder\spreadsheet.csv
  </code></pre>
  
  <p>I've found multiple methods online like </p>
  
  <pre><code>&lt;script src="jquery-csv.js"&gt;&lt;/script&gt;
  var table = $.csv.toArrays("spreadsheet.csv");
  </code></pre>
  
  <p>or </p>
  
  <pre><code>d3.text('spreadsheet.csv', function(error, _data){
              var table = d3.csv.parseRows(_data);
          });
  </code></pre>
  
  <p>or</p>
  
  <pre><code>$(document).ready(function() {
      $.ajax({
          type: "GET",
          url: "data.txt",
          dataType: "text",
          success: function(data) {processData(data);}
       });
  });
  </code></pre>
  
  <p>But I tend to get same-origin policy errors such as:</p>
  
  <pre><code>XMLHttpRequest cannot load file://data.txt. Received an invalid response. Origin 'null' is therefore not allowed access.
  
  Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. 
  </code></pre>
  
  <p>I can't seem to get these to work offline. How could I accomplish this?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I'm managed to get the following to work for a text file only on <strong>Firefox</strong> using the CSVToArray function found <a href="https://stackoverflow.com/a/1293163/2374028">here</a>, which is pretty sluggish with a file of this size, and a hidden <code>iframe</code>.</p>
  
  <p>Ultimately, it would be preferable if this was capable of running on IE8, and if I used a csv rather than a txt file, but at least it's a start.</p>
  
  <pre><code>&lt;iframe style="display:none;" id='text' src = 'file.txt' onload='read_text_file()'&gt;
  &lt;/iframe&gt;
  
  &lt;script type="text/javascript" &gt;
  
  function read_text_file() {
      var text = document.getElementById('text').contentDocument.body.firstChild.innerHTML;
      var table = CSVToArray(text); 
  }
  </code></pre>
  
  <p></p>
  
  <p>For <strong>IE8</strong> I managed to get this to work on a small scale but with the 3mb file it will occasionally crash the browser and will always accost the user with both a ton of warning messages that activex is being used and a wave of warnings that the script will slow down the computer.</p>
  
  <pre><code>    window.onLoad = readFileInIE("file.csv");
  
      function readFileInIE(filePath) {
  
          try {
              var fso = new ActiveXObject("Scripting.FileSystemObject");      
              var file = fso.OpenTextFile(filePath, true);                                    
              var text = file.ReadAll();  
              var table = CSVToArray(text);
              file.Close();
  
              return fileContent;
          } catch (e) {
              if (e.number == -2146827859) {
                  alert('Unable to access local files due to browser security settings. ' + 
                      'To overcome this, go to Tools-&gt;Internet Options-&gt;Security-&gt;Custom Level. ' + 
                      'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"'); 
              }
          }
      }
  </code></pre>