CODEWITHSUNDEEP
javascriptjqueryajax
maja
maja

Reputation: 18044

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:

Question:

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

Upvotes: 32

Views: 63824

Answers (8)

Stucco
Stucco

Reputation: 420

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);
  });

Upvotes: 1

Alex Matan
Alex Matan

Reputation: 69

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.

Upvotes: 6

Yash Mangla
Yash Mangla

Reputation: 133

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.

Upvotes: 2

yeahdixon
yeahdixon

Reputation: 6934

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

Upvotes: 4

symcbean
symcbean

Reputation: 48357

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.

Upvotes: 2

Oleg V. Volkov
Oleg V. Volkov

Reputation: 22421

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.

Upvotes: 12

Florian Potthoff
Florian Potthoff

Reputation: 41

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.

Upvotes: 4

Miquel Las Heras
Miquel Las Heras

Reputation: 760

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

Upvotes: 1

Related Questions