It is often useful to encapsulate a website onto a local file system without using a web-server. I wanted to create a web-archive of a site and then substitute the jQuery get calls with local file reads. That way I would not need to access the Internet for the web-archive to work, and I could give it to other people on a usb stick, and they wouldn't have to install a webserver to run it. So I thought I'll use jQuery.get or jQuery.ajax to read the local file. They would all be JSON files, since that is what my server returns, but you can tweak it for other formats. After a bit of fiddling I got it right:
<!doctype HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link id="link" rel="external" href="data.json">
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "data.json",
beforeSend: function(xhr){xhr.overrideMimeType("application/json");},
dataType: "json",
success: function(data){$("#result").html(data.text)}
});
});
</script>
</head>
<body>
<p id="result"></p>
</body>
</html>
This reads the local file data.json and sets the contents of the #result element to the value of the "text" property. Here's my data.json just to be clear:
{"text": "Oh my word!"}
You also need a local copy of jQuery. Now this works just dandy on Safari and Firefox and I'm told in IE, but not in Opera or Chromium. Chromium says that this is a cross-origin request. I don't see why. I opened my HTML file using the file:// protocol and that tried to open a file in the same directory using the file:// protocol. How is that cross-origin? Because it made me cross? But the workarounds in Chromium/Chrome are dire: they suggest installing a local webserver – ridiculous. The only reason I am doing this is to avoid that. Or they say use the --allow-file-access-from-files option when launching chromium. But it doesn't work, at least not on Linux. However, I discovered that if you add --allow-file-access as a second option it works, though neither works on its own. I saved the options in /usr/share/applications/chromium.desktop under the Exec= property. It's a bit of a pain to ask people to do that but it is far better than installing a webserver.
Here's my Exec line from chromium.desktop:
Exec=chromium-browser --allow-file-access-from-files --allow-file-access %U
To fix Opera is more sensible: You just set Allow File XMLHttpRequest in UserPrefs of opera:config.
