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.
This information really worth saying, i think you are master of the content and thank you so much sharing that valuable information and get new skills after refer that post.
ReplyDeletePHP Training in Chennai
when i put text file in the same folder (url: "config.json",) it is working but in other folders(url:"D:\Support\JBM\box-webserver\webroot\config.json") ajax url is not working , please provide the solution for this
ReplyDeleteThanks a lot very much for the high quality and results-oriented help.
ReplyDeleteI won’t think twice to endorse your blog post to anybody who wants
and needs support about this area.
software testing courses in chennai
javascript training in Chennai
mysql dba training in chennai