How can I zip/pack a bunch of html, js and css files together so that whenever a person click on that zip file, chrome and local server start on that machine and some particular file will be loaded on the first screen...any ideas
Simple!
Combine all your HTML files into one.
uuencode all your media assets and add them to CSS.
Convert all the CSS to inline CSS in the single HTML file.
Copy all the JS into the same HTML file.
You now have a package with everything in it, and since it's got an html file extension, it will launch the browser when you double-click it.
(I recommend you write a script to do this, and share it with all of us.)
You might have to create an auto executing .exe file in the zip file that runs after it's un-zipped.
You'd probably be better off with a "README.TXT" file in there, as the auto .exe is sketchy (and virus like) - it may also be snagged and quarantined by anti-virus
Related
I often see on website the file name ends with ?(version) a version number like so
/static/fav/fav.ico?2
same applied to css or js files
/static/css/d.css?2
is it possible to append this ? then the version of the file with webpack ? or how do people do such a thing
People do this because photo files, css and js are cached in web browsers. Browsers remember these files to reload pages faster.
However, if you make a change to the example.js file and want to force the browser to reload it instead of the cached file - you declare it with a different filename, e.g. example.js?v=2
I have a project where I visualise data from a file (say, a CSV). My visualiser is a .html bundle created with Webpack. Up until now, I include a placeholder for the data as a string in the bundle. If I want to change the data, I replace the placeholder in the bundle .html file with the new data I want it to show (via an external script).
Now I'd really love to change this for convenience. For example, I'd like to get a list of all the supported files that are in the same directory as the .html file and load their data, either in the background or when I click or them or whatever. (In the easiest use-case, there would just be 1 data file in the directory and the project would just load this data automagically at startup.)
I had a look at Handlebars.js and I think it might help with the injection of the data. However, it seems that there is no possibility to read from the directory I start the .html file from. I already tried fs and path but those don't work in the browser when I just want do double-click the .html file.
Is there a possibility for the browser to read files from the directory I open a .html file from? And if so, how can this be done in Javascript/Typescript?
I am creating browser based video editing tool. I want a user to first download a ~70mb javascript file and store it somewhere on his computer. I want to link that file when my website is opened. How can I achieve that.
EDIT
What i meant is that there are various files like js1.js,js2.js... all sums upto 70mb . So i will offer a zip folder to download and only link js1 or js2 file etc depending on the effects user wish to apply
i am sorry to inform you but i think there is something really wrong with what you are trying to do.
A "solution" would be to just cache the javascript on the user's browser so any subsequent requests parse the cache instead of requesting the resource again from the server.
You should know however that if you are in need to download ~70mb of a javascript file you are doing something wrong. I have a whole web app project that when published the total size is around 60mb, all files required to properly run included, and its a damn big codebase in there.
I find it very hard to believe there is ever a need for a single javascript file to be that big, in any case maybe a simple caching should do the trick
That is actually done automatically. Once you add a <script> tag with a link to a local js file (also stored on the server) the file is loaded automatically.
See HTML <script> src Attribute for more information on that.
You can only reference to js files on the server. Files on the server could look like this:
index.html
somefancyjsfile.js
You can then reference from inside your html file to the js file via the <script> tag.
I'm not sure though if the size is not a bit too much...
I want to create a popup window that shows me all the files in a certain directory like ex a /functions directory. I want to be able to click a file in that directory, click ok, and store it's info in variables (not upload it), How would I do this?
I've tried using a form as:
<form action="" method="post" enctype="multipart/form-data">
But with that I can't specify a directory to open specificlly, I have to manually navigate to that directory.
I've tried using window.open()
window.open("file:///" + "home/user/Desktop/demo/functions");
I've tried using an onclick link mechanism:
<a onclick="file:///+ "home/user/Desktop/demo/functions"">Open folder</a>
None of these seem to work, any ways I could approach this problem?
In JavaScript, file handling gets a bit messy. The only way to grab the contents of a folder from JavaScript would be to connect to a server and have a serverside code in a different language relay the folder information back to JavaScript.
The only way I can think that we could be able to fake this result is by placing an index.html file inside of the target directory. This index.html file would then have the names of all the files in the folder within it. However, they would have to be manually plugged into the HTML file. (if you know how to use PHP, it can scan a directory and push the contents to the HTML file)
When a web browser has to navigate to a folder, it asks the server for an index file (usually this will be an HTML or PHP file). This index would then have the contents of the folder inside of it.
If the folder is indeed on the local computer, however, there is one final way we can do this...
If the page navigates to a folder using a window.location of something akin to file:///C://Users/USERNAME/Desktop/My%20Folder/, chrome (or whatever browser you are using) will navigate to the directory and display the contents of the directory. However, since you can't put JavaScript into this browser-generated index page, you won't be able to manipulate it.
The <input type="file"> is probably your best bet, but you can't set a default directory with it (at least not without some JavaScript voodoo, and even then there are security issues between the web and the local user).
I don't know why you would want to do that, anyway, since directory structures are going to be different between different users, and the specification of paths is different between different OS's.
Instead of doing this I will suggest you copy that picture in project/image folder after clicking the upload button.
I want to write a npm package to localize an html url.
1. using the html url download the html page
2. parse the html file, extract all the js, css and img files used in the html and local these resources.
3. If these js, css and img files using some external resources, localize these resources. For example, extract background image in the css.
The first and second requirements are easy to meet. But I have no idea about the last one.
I can parse the all the css files and localize the resources used in it. But how can I parse the js files?
For example:
If the js adds a 'script src = XXX' tag into the html dom, how can I extract the src?
I think I would try to use a headless browser to catch every network calls instead of trying to parse the code.
I didn't used it personally but PhantomJS seems to fit the bill.
It can be used to load a webpage then execute any script / css that would normally happen on the request and execute stuff once the page is loaded.
The network monitoring features are probably what you'll want to use.