I created a html page (stored locally) that uses Googlemaps API. My whole page is a basic google map with some customization. I want to take a screenshot every time I change some parameters in the customization so later I can easily compare.
I've found this similar answer and I got it to work on my machine. However, when I change the url from an actual webpage into my own local html file, Phantomjs only saves an entirely black image.
Here is my script.
var WebPage = require('webpage');
page = WebPage.create();
page.open('googlemaps_demo.html');
page.onLoadFinished = function() {
page.render('myScreenShot' + '.png');
phantom.exit();}
The file googlemaps_demo.html and this js script itself are in the same folder. Could someone explain to me why this code only works for an online url, but not a local html file? And how to fix it?
You probably need to specify file using a file:/// scheme and a full location of your file, e.g. file:///c:/local/page.htm
Related
I am working on a project, and i want to know if there's any way to change content of a html file like images, text, etc. with javascript (without any framework) by clicking on elements of another html file.
In general the browser will prevent you from editing the content of any file on your hard drive, or any page served from another domain/base url. However, if both files are in the same project as shown below, you can make temporary edits to one file from the other;
/http
|-index.html
|-template.html
|-hello.png
index.html can contain a <script> tag with the following
// first we open a popup showing the other page
let window_template = open("template.html","_blank")
// now we can do whatever we want in the popup window from the original index.html:
let new_img = window_template.document.createElement("img")
new_img.src = "hello.png"
window_template.document.body.appendChild(new_img)
This does not (and cannot) save any changes to "template.html".
To actually make changes to files, you need to run your own server. Then index.html can send a request to the server, and the server will have the ability to make edits on behalf of your browser-based app. Check out Node.js and the Express server library... I found it approachable enough as server frameworks go.
I am fairly new to web development. I am using HTML and Javascript, specifically the Jexcel Javascript library, to create a spreadsheet webpage. The spread sheet is sourced from a CSV file stored in the working directory of my project. The problem is, when I make changes to that CSV file, they do not show up in my project until I rename the file (and change the filepath in my code respectively). I suspect this has to do with the webpage caching the source CSV file, but I am not sure. How would I go about disabling caching/making my table source from the CSV file everytime? I am using Tomcat Web Server as well. Thank you.
The code that is sourcing my spreadsheet is the following:
<script>
$('#spreadsheet').jexcel({
allowInsertRow: false,
allowInsertColumn: false,
allowDeleteRow: false,
allowDeleteColumn: false,
csv : 'data/test.csv',
csvHeaders : true,
defaultColWidth : '200px',
});
</script>
When changes are made to test.csv I want those changes to show the next time the page is refreshed, but this is not currently happening.
Update: Restarting the Web Server does make the changes show up, so I believe this is a caching issue. I am using Java Servelets on the Server Side of my code.
Browser side caching of resources is a common issue.
To prevent it, the easiest way is to append a version hash to resource url to force reload when modified, so you still benefit of cache feature when file hasn't changed.
Without information about the languages you use on server side, it's very difficult to help you more.
Here is the fonction I generally use to generate resources url :
function assetv($path) {
$hash = 'undefined';
if (file_exists($path)) {
$hash = filemtime($path);
if (!$hash) {
$hash = md5_file($path);
}
}
return urlFromPath($path) . "?v=" . $hash;
}
Of course, the "urlFromPath" depends on your app ;-)
[EDIT]
The browser loads your csv file using an url (data/test.csv) that is "used as cache key" (approximately).
So to force reload when file was modified, you need to change the url, for instance with a version number parameter (file name doesn't changes) :
data/test.csv?v=1
data/test.csv?v=2
As server side only is aware of file state, you need to generate the versionned url on server side when building your HTML.
Finally, instead of managing a version number manually, you can use a "natural" attribute of the file, as it's last modification time or a hash of it's content.
Thank you all for the suggestions. Ultimately I found out the problem was due to the fact that the csv file I was sourcing my data from was in the project folder and Tomcat does not update changes to that file immediately. I solved this by reading the data from a file stored outside the working directory on my machine.
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 have a system that was built in JavaScript for a website ages ago which I need to make slight changes for; which includes saving the data to be loaded again later.
The main difference is this time the system will be completely local; no server whatsoever.
What is the best way to save/update (& load) a file in locally; ideally without a download prompt.
You're looking for [localStorage][1].
What you can do with localStorage is retrieve the image as Base64 in localStorage and then when page is loaded you can access to localStorageto get the image and put in your img tag.
Here's is working fiddle : http://jsfiddle.net/joherro3/Gg6AG/506/
I am attempting to use a javascript function to load a local file in my WP7 project. So far the following code works but it loads an image file from a web address instead of a local directory in my WP7 application ( Resources/Icons/appbar.go.rest.png). I have researched everywher to load a local image file properly from a local directory in my project but have yet to be successful. My code is as follows
Javascript
var body = document.getElementsByTagName("body")[0];
var s = document.createElement("input");
/loads image file from web address
s.src = "http://www.gravatar.com/avatar/a4d1ef03af32c9db6ee014c3eb11bdf6? s=32&d=identicon&r=PG";
s.type = "image";
body.appendChild(s);
As I said the above code works, but I would like to use a local image file in my project rather than the web address above. Does anyone know how to correctly implement this solution?
you can read this article which provide a solution by using WebClient:
Operating with image files in a Windows Phone 7 application
http://dotnet.dzone.com/articles/operating-image-files-windows
jQuery .load() method can load files well, but unfortunately I haven't used it on windows phone 7 environment which saves files on its Local Storage.
http://api.jquery.com/load/
You can't load the image directly from the clien't machine (remember that that javascript peace of code will run on the client's local machine). You should serve the image file as you are serving the Javascript file, then point 'src' there.