I have a JavaScript application that an user interacts with. I need to save the appearance of the interface at the current time, crop out the part that I need (or only shot the part that I need by specifying the div), and send it back to the server.
Clearly any external services would not be able to do this, I need a JavaScript (or Flash) script that can save the screen appearance. Is this possible?
Also, as the comment below says, I cannot use ActiveX.
Google is doing this in Google+ and a talented developer reverse engineered it and produced http://html2canvas.hertzen.com/ . To work in IE you'll need a canvas support library such as http://excanvas.sourceforge.net/
I think using JavaScript, you won't be able to due to the security restrictions. Flash, possibly.
It's impossible in pure JavaScript, without using ActiveX.
It is impossible using JavaScript (nor Flash). It depends on your constraints, and there are some workarounds.
You can take advantage of browser extensions (such as a Firefox add-on), but I guess it does not fit your requierments.
The best option I can think of is to construct the DOM tree on the client side, and then post it to remote server.
On the server side nothing really holds you from doing generally anything. Using WebKit or even launching Internet Explorer or Firefox, you can create the snapshot server-side.
It's far from elegant, but possible.
Related
Is there any way to recognise pen pressure using javascript.
Preferably I don't want to make any use of Flash and try get this done as pure JS.
EDIT: okay I realised that it is kind of possible for Wacom tablets as they come with software that can work with their javascript api to make it possible (demos). But it's no good for people with Trust tablets or any other brand... So no good really.
Any body know how to do it in C# if not JS?
Yes - if the user has a Wacom tablet installed, then their browser will have a plugin for it that you can access. http://www.wacomeng.com/web/index.html
edit from author: I wrote this a very long time ago. Please see the comments below
Microsoft implemented something called Pointer Events in IE 11. It allows you to access pressure property along with stuff like pen tilt and size of contact geometry.
So far it only works on IE11 (and IE10 with vendor prefixes) but there is a W3C candidate recommendation so maybe it will be standard in future.
Javascript as a programming language in itself has no more ability or lack of ability to read this kind of data than any other language.
The language isn't important. What is important are the APIs available to you from within the language.
Javascript can be run in a number of different environments, some of which may possibly have access to APIs for this kind of hardware. However most Javascript is run in a web browser environment, and this is clearly what you mean.
The web browser environment provides a number of APIs. The most obvious is the DOM, which gives you the ability to manipulate the page, etc. There are other APIs available in the browser as well though. For example, the Geolocation API.
All these are standard APIs which have been defined by the W3C (or in some cases are in the process of being defined by the W3C), meaning that all browsers that support them should make them work the same way.
Unfortunately for you there isn't a standard API for working with pressure pads, so the direct answer to your question is no, it can't be done.
Whether one will become available in the future remains to be seen, but I have my doubts.
There is one way that you can do it though: ActiveX.
ActiveX is an API provided by Microsoft in older versions of IE. It basically provides a way of accessing virtually any Windows DLL code from within the browser.
Since the pressure pen device driver for Windows will be provided as a DLL, this means you should theoretically be able to access it in the browser via an ActiveX control. So therefore yes, you would be able to program it using Javascript.
The bad news, though, is that this is not something I'd recommend. ActiveX as a browser-based technology has long since been abandoned, due to the massive security holes it caused. I don't think the latest versions of IE even support it (I hope not, anyway), which means you'd be forced to use old versions of IE (and only IE - no other browser ever supported it) in order to run your code. Not ideal.
No, that's not possible. Probably not even with Flash.
You can only do so in an Native app. Javascript does not have access to pen pressure information
I know this subject has been largely discussed and there is no way to get the parent frame modify the children frame due to security reason.
BUT
I'm developing a ad-hoc solution for some clients, we can configure their browser and eventually install plugin ( which will be the "fail" solution).
We would like to configure the browser (chrome or whatever ) to NOT protect the browser from this.
My aim is to inject a JavaScript into their website without having any access to their website.
I actually use a php proxy which works... pretty bad ( how to keep the links when they are loaded dynamically via JavaScript? ) and I would not like to develop a Firefox plugin because it s a bit heavier and longer to set up I guess.
Any idea?
Your question is not that clear. But if you want to load a different domain from the parent in an iframe, there is no way to access it, UNLESS your customer uses an open-source browser and are happy for you to install on their systems a hacked version of the browser that will allow this.
But I can assure you this is not going to happen for a variety of reasons.
tl;dr: you can't.
You can communicate between 2 frames from 2 different domains using window.postMessage for the recent browsers.
If you have to support IE6/IE7 or older browsers, you can use the window.name hack.
Both techniques allow you to pass string data between frames.
You need then to have some javascript on both sides that listen to the event and make the action. You don't need to change anything to the browser configuration.
EDIT:
After your comment, here is another option: a bookmarklet. You define a page like this on your site, changing the path to the js file:
<html>
<body>
Drag'n Drop this to your bookmarks
</body>
</html>
And you ask your users to click the bookmark when they want your code to run.
This will inject the code in the client page, and you are free to do what you want.
Obviously this has a security concern. Your script has full access(content, cookies) in their page. But since you are almost ready to recompile a web browsers for that :) I guess it will work for them.
Are these all the languages/solutions you could use in frontend?
javascript+html+css
flash
java
silverlight (c#, ruby, python etc)
And what is a plugin for Safari and Firefox written in? Is it low-level languages like C++?
FireFox plugins use XUL, https://developer.mozilla.org/En/XUL, HTML, JavaScript and CSS;they are called chrome applications. In fact the browser itself is a chrome application. It also uses XPCOM for some things, https://developer.mozilla.org/en/XPCOM. From that link "XPCOM components be used and implemented in JavaScript, Java, and Python in addition to C++".
And if your curious, Microsoft's XAML was pretty much taken from XUL.
As far as I know for plugins in Safari/Chrome and other non-IE, they just use HTML, JavaScript CSS. For IE plugins, check this out, http://discuss.joelonsoftware.com/default.asp?design.4.423268.5
firefox: How to create extensions for firefox
plugins for chrome, you can write those in simple Html, javascript
Simply put (and as you probably well aware), and to use the long-standing terminology, there are two sides to a (say, web) experience, the client and the server:
Any language that can run without a
call to the web server in the client
(i.e. the web browser) is
client-side (Javascript is the
obvious example);
a language that runs on the server,
but produces content that the client
can request, is server-side (Ruby,
Python, Perl, etc.)
Plugins like Flash or Silverlight are a separate case. Although themselves written in languages functioning at a lower-level than client-side scripts, they nevertheless operate in a client browser with the plugin, and - once loaded - Actionscript (say) will run in the browser, client-side.
To complicate matters, HTML and Javascript can be used to write (e.g.) OS X widgets and Browser plugins and - although they may call on server functions for (say) data - they're still client-side.
Further, the ability of HTML5 to store data, and the rise of NoSQL solutions, mean that the division is no longer as clear-cut as it once was.
Front end is never limited to what languages/platforms, frameworks, APIs etc. that you could use. However, you could say that HTML, JavaScript (and its frameworks), CSS are the main platforms you are going to use while front-end developing. But you should keep in mind that complex issues require specific knowledge therefore, it's good to know other languages/platforms as well.
Regarding your second question, even though most of them use HTML, CSS and Javacript.
To learn more about what language and platforms mozilla uses check out this link and click on specific documentation:
https://blog.mozilla.org/addons/2014/06/05/how-to-develop-firefox-extension/
Checkout this tutorial on how to make a chrome extension:
https://developer.chrome.com/extensions/getstarted
Check out this tutorial on how to make a Safari extension:
https://code.tutsplus.com/tutorials/how-to-create-a-safari-extension-from-scratch--net-15050
I've developed a ajax enabled site. However, the site does not currently work without javascript. The site works well on any browser that I've tested as well as iPhone/Nokia phones.
However, should I still worry about javascript support?
I know there are techniques that would get my site to work both with or without javascript, but the refactoring would require some time.
Edit: This application is targeted for our customers that will be using the the system to fill in and handle forms. Professional use mostly.
Javascript is Huge now and since facebook and other large JS Based site, browsers have pushed out new innovations to deal with the latest web changes when it comes to JS
Because of this JavaScript is widely supported and you should not worry dramatically but it still needs to be delt with.
A Simple <noscript> tag to display a message to a user telling them they need javascript to continue
<noscript>
Please enable javascript to use this site
</noscript>
Keep checking your analytics software such as google, mint etc to see what your visitors are using.
That will help you decide how much you have to worry about it
A way to Track non JavaScript enabled browsers is like so
<noscript><img src="noscript.php" /></noscript>
This will load a php file as an image!
the php file
<?php
//Track the user details here inside your database or whatever so you can then see.
//Here send back a 1x1 pixal so the DOM IS ok and to reduce load
$pxl= imagecreate( 1, 1);
header( "Content-type: image/png" );
imagepng( $pxl);
imagedestroy( $pxl);
?>
You could display a message to users with javascript disabled saying that the site will not work properly:
<noscript>
Hey, it seems you have Javascript disabled. Get out of my lawn!
</noscript>
If this is a big deal or not depends on your target audience.
You should always try to keep in mind that a certain percentage of endusers disables javascript in their browser. On the other hand most modern sites don't work anymore or don't always degrade gracefully. It's up to you to either convince your users to enable javascript or to create at least a page with minimal functionality which can be run without javascript.
Grz, Kris.
Most browser today have javascript enabled. One thing to keep in mind is that crawlers/spiders from for example google do not have javascript on.
This depends entirely on your users.
If you can make sure your users browser supports JavaScript, then it's up to you to ensure the actual code is valid and complies to JavaScript standards.
Many argue that pages has be readable by blind people and have all kinds of fallback options, but this depends on your users, and what you require of them.
If you really have to support all kind of phones, and weird devices, just create a separate front-end.
AFAIK, Google bot does not support JavaScript. So, if you want your site to be indexed by search engines, make content accessible without JavaScript.
It depends.
If you're expecting good chunk of traffic from the mobile web-browsers then yes, you must refactor the website to make sure it works well with those client. If majority of the traffic is coming from rich desktop web browsers then, it shouldn't be problem.
I want to check the performance of the gzip decoding speed in a web browser.
In the Java or c#, we can easily check the gzip decoding time.
But I can not measure the decoding time in the web browser.
plz help me.
I want to check some decoding speed of gzipped html files.
With JavaScript can I measure the performance.
In open source browsers like Chromium or Firefox you could have a look at the source code and insert some lines to record the time needed for decoding. If the browser uses a specific library for gzip decoding, you can of course also download that library and test it.
I don't think there's a way to get that time, especially in your own Javascript code : I suppose the decompression is done at a much lower-level (like somewhere arround the download/network layer of the browser) than the rendering of the page the execution of your Javascript code.
That would be the best solution for that compression to be totally transparent for the upper-layers : when rendering pages or executing JS code, there is absolutely no need for the browser to know that it's been received in a compressed form.
Maybe a solution, especially with Firefox, would be to develop some extension ?
Considering Firebug, for example, is able to kind of "hook" into the network layer, to display the information we get in the "Network" tab, I suppose you might be able to do sort of the same ?
In Google Chrome, you can check out the various properties of chrome.loadTimes().
You can do it using Fiddler - it has a time display for each HTTP transaction. Because Fiddler is a debugging proxy, it works with any browser. Windows only, though.