Javascript – How to Load Local Files Without a Web Server

ajaxjavascriptjquery

I need to write a software that uses HTML5 and canvas.

The whole software should be able to run locally, without the need of a server. So I'm only able to use Javascript, no php.

The difficult part: I have to dynamically fetch the content of text-files which are needed during operation.

For example: When the software starts, I need the "config.json".
And after the user made some desicions, I need "story1.txt" or "story2.txt" and so on.

My Problem:

I can't use Ajax, because Chrome blocks it – local Files aren't allowed to fetch other files' content. I always get an error-Message.

What I've tried so far:

Load Files with Ajax & jQuery

Chrome doesn't allow me to load the file
Load File into script-Tag

Even if I declare the JSON-File as js-Code, I can't access the content of the loaded File
Load File into invisible Iframe, and read its content

Loading works, and I can see the code. But when I try to access the IFrame's content, I get the Chrome Error-Message again:
```
"Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match."
```

Question:

Is there a way to load a Textfile dynamically, or am I forced to use a Webserver?

Best Answer

If you insist on using Chrome, it have some command line flags to allow access to/from local originated files (--allow-file-access-from-files / --disable-web-security). Do note that you need to run entire browser from scratch with those flags - i.e. if there's already any other Chrome windows open flags WON'T have any effect and that effect persists across ALL windows until Chrome is closed, which is, obviously huge hole in security.

You can set up a lightweight local server if you pack your "application" with some kind of automated setup script. This is still not very good, because you'd need to install executable that user might not want or even be completely unable to install due to restrictions.

You can pack your HTML/JS-based app as Chrome extension - extensions have much wider permissions than random code, but then you'd need to either distribute it through Google Play or provide instructions to manually install extensions for your users.

And finally, you can format all the data, including your configuration and text files your mentioned as valid JavaScript code - i.e. pack a story1.txt to story1.js like:

var myapp.story1 = "Complete text of story1.txt"

and then just dynamically select stuff you need from corresponding vars or even use DOM manipulation to only load scripts you need through dynamically adding <script> tags. In my opinion that would be best option because it is less intrusive: it doesn't requires any installation/reconfiguration, it just works out-of-box.

Related Solutions

jQuery – How to Load a Local File with file://

GET requires an HTTP connection, so without a local web servber it won't work. While you can open and read a file using HTML5, you can't load a JavaScript resource that way.

If the page is loaded locally, you'd usually load the JS using a script tag.

<script type='text/javascript' src='/objectData.js'></script>

The only way around this may be in this answer: Is it possible to load in a local version of a JavaScript file instead of the server version?

or this (both require making a local pseudo-server) :

JavaScript AJAX – How to Open Local Files in JavaScript

This is actually most likely a scope issue. Because you're setting allText asynchronously, it's not available immediately after the function returns. In addition, you're reinitializing allText within a function, which messes with the scope of the return regardless.

rawFile.onreadystatechange is executed after the function returns. You can either move the execution into the XHR callback, or wrap the function in a promise, which would still require you modify your control flow a bit.

Move the document.write:

<!DOCTYPE html>
<html>
    <script>
        function readTextFile(file)
        {   
            var allText;
            var rawFile = new XMLHttpRequest();
            rawFile.open("GET", file);
            rawFile.onreadystatechange = function ()
            {
                if(rawFile.readyState === 4)
                {
                    if(rawFile.status === 200 || rawFile.status == 0)
                    {
                        allText = rawFile.responseText;
                        document.write(allText);
                    }
                }
            }
            rawFile.send(null);
        }

        readTextFile("foo.file");

    </script>
</html>

Promisified:

function readTextFile( file ) {
  return new Promise( function ( fulfill, reject ) {

    var allText;
    var rawFile = new XMLHttpRequest();
    rawFile.open( "GET", file );
    rawFile.onreadystatechange = function () {
      if ( rawFile.readyState === 4 ) {
        if ( rawFile.status === 200 || rawFile.status == 0 ) {
          fulfill( rawFile.responseText )
        }
      }
    }
    rawFile.send( null );
  } );
}
readTextFile( "foo.file" )
  .then( function ( t ) {
    document.write( t );
  } );

Both of these will ensure that your script doesn't attempt to use allText until it's been returned by the XHR request.

Though as Santiago Hernández pointed out, the XHR request is synchronous, and the scope issue was of a different nature than I first assumed. The problem lies in redeclaring the variable within the function, resulting in the one returned to be undefined.

Best Answer

Related Solutions

jQuery – How to Load a Local File with file://

JavaScript AJAX – How to Open Local Files in JavaScript

Related Question