Include HTML file via JavaScript - javascript

This is a file stored locally, not on a server, so Server Side Includes do not work.
Problem:
I have an HTML file. There is lots of data in it, I want to split it into smaller parts, and then just include them all into my big html file, i.e. something like:
main.html
<include "partA.html">
<include "partB.html">
<include "partC.html">
And I want the result as if the contents of partA,B,C.html were read right into main.html
Now, this is not on a server -- it's stored locally, so I can't do SSI. My question is:
Is there some simple way to do this via JavaScript? It seems like with JavaScript, I shoudl be able to:
fetch the contents of blah.html [not sure how to do this ste[
call a document.write on it, to write it into the document
probably handle some stuff dealing with escaping strings
Question:
How do I do this?
Thanks!

It's not possible, as a security feature. This post here is a discussion on the topic - Includes without local server?. As the answers say, your best best is to install a small web server on the machine if you can. They're not too hard to get going.
I have used nginx before with good results. http://en.wikipedia.org/wiki/Nginx

HTML5Rocks has a tutorial on how to read local files using HTML5's File API:
http://www.html5rocks.com/en/tutorials/file/dndfiles/
Outside this, Javascript generally does not have the ability to access local filesystems.
Update - I assumed the main file was on a server, and you wanted that file to access local files. On re-reading, it appears all your files are local, in which case, some of the answers below will work.

Related

What language can I use to read directories and files from an HTML page?

I'm continuing the project I talked about in another thread here, but at the moment I have stopped because I can't figure out how to dynamically add content to the page. It's supposed to be a webapp that runs locally (it won't be hosted on a domain).
I thought I'd be able to do it with JS, however I found out it can't read files for security reasons. What I was planning to do was get a list of all the files and folders inside a given directory (using JS), then append a div for each folder (with more stuff inside) inside the content area of my page. Seeing how I couldn't do that with JS, I thought maybe I could do it with PHP using the same approach, but I didn't like the idea of having to run xampp just for this... if there's a way to have PHP running without xampp and/or a server, then it'd be great, but so far I haven't found anything about that... except downloading PHP, but I have no clue how to "use" the console from the browser and then have it append the divs to the page, since the console and the browser are "separated".
To make it a little more clear: is there a way to run PHP without a server, and if not, what other languages can I look up to?
At this point I'd also like to know how websites such as clipchamp.com work. Do you guys have a clue about that?
In order to run PHP, you'll indeed need a server with the right permissions on the folder.
For small local projects, I've seen Node.js used, the learning curve isn't too steep if you already know JS. Check out the fs module in Node for access to the filesystem.
I thought I'd be able to do it with JS, however I found out it can't read files for security reasons.
It can, just not when the JS itself is executing in a web browser. JS running in, for example, Windows Scripting Host or NodeJS would have no problems.
if there's a way to have PHP running without xampp and/or a server
You can run PHP from the command line, but if you want the output to be rendered in a browser then you really need to be dealing with HTTP, which requires a server.
There is always the option of PHP's built-in webserver.
is there a way to run PHP without a server, and if not, what other languages can I look up to?
It doesn't matter what language you use. You'll find it hard to pick one that can't read the file system. They will all suffer from the same limitations when it comes to interacting with a web browser though. You need to be talking HTTP.
That is the whole concept of a browser. A browser can not give more permission to the system then the user of the browser does.
You have afaik two options: Use a server on the machine you want to manipulate (there are all kind of flavors, you can use nearly every language for building a server) or use/create a browser plugin that can do it (Silverlight can have access to the file system under some restrictions).

create a folder with JavaScript

I know that JavaScript is not allowed by browsers to do much directly with the computer, and that is not my question. My question is: How to, with JavaScript, create a file on the web and then ask, perhaps with a popup window, to download the folder and any files within. This folder would need to allow access for JavaScript to place files within, like image files. This folder might originally be just another JavaScript value (like an object) or a URL.
I have done research, but much of what I found was asking whether JavaScript could create a folder directly to the computer, while my question is asking about creating the folder, and then asking to download it. There must be some way, because when in Google Drive, drive has a way to place multiple files in a .zip folder for download, and this works not just with Chrome but with Firefox and Internet Explorer. Some sites like http://stuk.github.io/jszip/ provide their own way to create .zip files, but I would prefer not to use a JavaScript library, if possible.
This would be useful for generating multiple image files, but only asking the user once for downloading them, instead of for each file.
I would prefer to create the zips client-side.
So this is an interesting question and I shall do my best to answer it. The simple solution is to not do this at all. Use javascript to asynchronously request the server to create the required .zip and then give the user a link/prompt to download. But I digress, you want it all in-house!
JSzip Option
You'll not be able to write a solid library that can .zip files client-side. JSzip is the best option out there, and it's not as solid as it could be. If you have the time you could go through the source and make improvements where required.
Cheeky Option
Your best option - baring the actual best one (server side) which you have discounted - is explained here. That is - create an iframe for each file.
Unfortunately you'll not find any better than those options if you're insisting on client-side work. Browsers weren't made to be zipping files.

uglifyjs javascript inside php files

My project has a lot of JS code inside PHP files. I want to minify the JS code in these files and I like the uglifyjs2 program. Is it possible for that (or any) JS minifier to act on JS code INSIDE a php file?
Someone is going to suggest removing all JS code from the PHP files and placing it in .js files - but that isn't always practical.
Keep in mind that I do NOT wish to minify the JS on the fly (acting on the output of the PHP interpreter). I am delivering PHP code to customers containing JS, and I wish to minify the JS inside the PHP files that I am delivering.
What you're looking for does not exist.
The only real reason to have inline JavaScript inside your PHP files is because you need to interpolate PHP and JavaScript in order to dynamically generate some or all of the script. You cannot reliably minify such JavaScript before the PHP is actually processed, so you'd be looking at minifying it after the PHP is run, on every request. There should be very little value to this, as the vast bulk of your JavaScript should not be written inside your PHP files.
Whatever the php script generates as output is sent to the browser. If you sent the "actual" output of the script instead of the output stream to another application and fetch and redirect that output - yes, you can do just anything.
Another question is how feasible and reasonable that approach is. uglifyjs2 is a node.js appliation, and therefore this step would require some kind of interprocess communication, i.e. extra-complexity and extra time/memory/points-of-failure and all that good stuff.
Maybe it's worth the effort, maybe not. Maybe something like https://github.com/tedious/JShrink will suffice...

How do I read from external files in JS Bin?

I've been doing Code Year at Codecademy and I wanted to start practicing Javascript for myself, but I've been having a tough time figuring out some basic issues.
For my first project, I want to read in from a spreadsheet. I can't figure out how to access the data from its original source online, so I thought I would just save it as a text file. My question, then, is how to read from that.
So it looks like you can't read local files in Javascript. (Although apparently that's changing with HTML5? I don't have any familiarity with that.) So do I have to upload the text file someplace? Can I upload files to JS Bin? If not, does anyone have any recommendations for where I can upload the text file? And either way, once I do, what's the code to read from it?
Thanks in advance. I am sure this question is riddled with misstatements and improprieties, but I've spent a significant amount of time on this and I can't find anything that seems to answer my question. I honestly thought it would be something simple, like "var inputfile = c:\file.txt" but that seems not to be the case. I am totally lost. Thanks!
You can't. File system and storages in Javascript (or rather the client) is sandboxed.
That means you can only read what is written there in the first place. This has to do with security.
You will need to drop (or select) the local files into the browser and have some mechanism there to receive the drop/selection and store the file to one of the local storing mechanisms such as indexedDB or file API (the latter currently only supported in Chrome). For text files localStorage works fine too.
Resources:
http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side
http://www.w3schools.com/html/html5_webstorage.asp
http://www.w3.org/TR/webstorage/
http://www.w3.org/TR/FileAPI/
http://www.w3.org/TR/IndexedDB/
The other option is to upload it to server and download it from there when you need it.
When you get to this point in your development, its time to run your own webserver for testing as it makes things much easier. If you must insist on doing it your way, uploading the file to a file hosting site and reading it in is still possible. Codecademy is great for getting started, but when you get into dealing with persistent data sources (either files or databases) its time to get web hosting or set up your own test server.
Even then you don't REALLY need your own test server, just a folder on your computer. You can access the files with File://, and link in the file you want to read as a relative path. If the .txt file is in the same directory, you just link it in as "Example.txt" when you open the html file in that directory.

Localization and JQuery/JavaScript

I'm working on different language packs for my web app. Some of the output is generated by the JavaScript/JQuery and I can't use .aspx.resx resource files within the JavaScript. What options do I have in order to localize output produced by the client?
Thanky you
The most common way I've seen is different .js language files being kept in a lang/ or locale/ folder in the project, with only the file for the current language being included using a <script> tag.
If you want to manage your languages in one, central, server-side place, I think you would indeed be best of outputting your translations from ASP as a JavaScript file. I don't know ASP but that should be perfectly possible to do - just remember to send a Content-type: text/javascript header along.
Related, PHP oriented but doesn't really matter: this question. Check out the translation plugins mentioned there, they may save you work additionally.

Categories

Resources