Loading local files with Javascript without a web server

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?

Answers:

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.

Answer

You have to put your local files on the same server. If you are running on local server you have to install some webserver as Apache to get access to your "remote" location.

Every Modern browser stops this, because you mustn't read local files from ANY USER. Even if you are running from localhost.

Answer

If you just need a quick and easy "legal" web server to trick your browser into thinking that it isn't pulling from the local file system, just use Python's simple HTPP server. It simply serves up files on request from whatever directory it was invoked from. The server is otherwise dumb. It will not execute PHP scripts or anything. Here's how:

  1. Install Python 2.7 on your development machine. This is the only thing that this fix will permanently install.
  2. Open up your command line / terminal window.
  3. Switch to the directory where your scripts reside.

cd /Users/codemonkey/myCoolNewApp (e.g. on a Mac)

  1. Run the following:

    python -m SimpleHTTPServer 80

On a Mac or Linux box, you may need to use sudo:

sudo python -m SimpleHTTPServer 80

  1. Open up your browser and type in:

http://localhost/myapp.html (substitute "myapp.html" with your script name)

  1. And the people rejoice.
  2. To stop the web server, go back to the terminal window in which it is running and hit Ctrl-C. Or shut the computer down. This server will need to be restarted using step 4 each time you want to run it.

You can get really fancy and run multiple instances on different ports, but that's beyond the scope of this quick fix.

Answer

You can Load the Local file in Chrome Browser locally without Using AJAX. you can use normally use jQuery function like $.getJSON() for loading the file in chrome browser.

But if you use this jQuery functionality then chrome Web Security will Block your function to access file form files packages. On Firefox browser it perfectly runs but if your requirement is the chrome browser then you must need to set some Chromium Flags using Command Line.

Here is Some steps for you to set Chromium Flags which enables you some extra features which helps you access the data file from your local system. these are:-

  1. Exit or close any running-instance of chrome.
  2. Find the shortcut you normally use to launch chrome.
  3. Create a copy of it.
  4. Right click on the new shortcut, and select Properties.
  5. At the very end of the Target: text box, add a space and then the desired command line flags. It should something like: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security
  6. click "apply" button and then "ok".
  7. Double click the new shortcut to launch chrome with the new command line flags.

Note: Remember your Flags now set only for this chrome icon. so start your application with this chrome icon.

Answer

I would make a Chrome extension if your requirements allow that. They are easy to make and can work quite well for you. http://developer.chrome.com/extensions/index.html

Answer

I have found that firefox will run html and js locally.

Answer

Depending on your requirements, using fetch (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) is an option:

  fetch("./config.json").then(function(res) {
    // res instanceof Response == true.
    if (res.ok) {
      res.json().then(function(data) {            
        console.log(data);
      });
    } else {
      console.log("Looks like the response wasn't perfect, got status", res.status);
    }
  }, function(e) {
    console.log("Fetch failed!", e);
  });
Answer

What you are describing (and the proposed solution) seriously undermines the security of the browser.

should be able to run locally, without the need of a server

So how does the software get on the machine? Unless you intend sending DVDs in the post, deployment of the software can be as an HTML5 app using Manifest based caching (supported in all modern browsers, including Chrome, MSIE and Firefox). What this does not cater for is storing data as normal files - but you can keep data in local storage.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.