I need to be able to detect that the HTTP client page is closing so I may tell the server that it should do some clean up. Is it possible to do this?
You can use the BeforeUnload event to detect when a user navigates away from the page:
window.onBeforeUnload.listen((e) {
// Do what you need to do
});
Note that this will detect any navigation away from the page, not just closing, which I assume is your desired behaviour.
There is no guarantee that the script at the client side will be executed correctly, because user can lose connection, browser can crash and so on. If it is a critical task(cleaning) then in addition to the client side solution you also should use some sort of a timeout.
Related
I am developing a web site where users can change settings which they have to confirm before taking effect.
The confirmation is done by a link I send them via E-Mail. In the HTML of the website I use this little snippet:
<script type="text/javascript">window.name="mysite";</script>
And in the HTML emails I use
Click me
But Chrome is always opening new tabs instead of opening them all in one.
Is this even possible or is it forbidden for some reasons?
Webmail platforms such as Gmail tend to modify some of the HTML code of an email due to security reasons.
They obviously remove any javascript code the email could have. But they also change (or add if none) the target property of every anchor element and set them to target="_blank" in order to avoid the user to be taken out of Gmail (in this case).
Unfortunately every webmail platform has their own behavior, therefore, what you want to do is not gonna work on every webmail platform.
If what you want to do is prevent the user from having multiple tabs of the same page opened, (*please refer to Update 1) it comes to mind you could use web sockets to close the previous tab once the user enters in the URL sent by email. Have a look at socket.io for example.
Update 1
There's no way to do this using WebSockets. There's no possible way to close a window that wasn't opened using javascript, and it can only be closed by it's parents.
That is a very interesting idea. I like it. Alas, it appears that, in modern browsers, you can no longer close a window you didn't open through javascript. So if you aren't allowed to run javascript in the email, the best you can do is to redirect the original page to a "thank you" page and leave it hanging around in the browser's tab (but no longer waiting on conformation). Like this:
PleaseConfirm.html:
window.name="need_redirected";
Confirm.html:
var w = window.open("", "need_redirected");
if (w)
w.location="ThankYou.html";
Of course, for old IE, I'd still try to close the old window in ThankYou.html:
window.top.close();
You can still try to set the target, of course, just in case it works, and you can always try putting an onclick attribute on your tag for the same reason:
click here
But that seems to be the best you can do. Bummer.
Neither of the other two answers work, but this one probably will:
In the initial tab, listen for an onstorage event, with a certain key being created, e.g. "userHasConfirmedEmail". When the event occurs, window.top.close().
In the new tab, create that key.
Credit goes to Tomas and his answer.
I have come across several posts about how to handle Javascript being disabled while/before the page is being loaded. However, is there any way to detect Javascript being disabled by the user after the page has loaded in order to hide content at the last minute?
Use a dead man switch on setInterval. If it doesn't trip the trigger, then you need to hide that content before the no javascript gremlins destroys it. How can you hide it without javascript? Have a competitive process going between CSS animations, and Javascript. Such that if javascript is not present the CSS animations (to hide the content), win out. And lo, the content waseth hiddeneth.
Attempt to an send an HTTP request to your server? If that ping doesn't arrive, javascript could be disabled.
Use a noscript tag to inform the user of various things in the event that javascript is disabled, such as the fact that the user has javascript disabled
Put a form in a noscript tag to ask a user to tell you that javascript is disabled, or otherwise to send feedback about their browsing experience to your site without javascript
Check if the UserAgent header contains Lynx?
You can find out if a particular user had disabled JS on his browser by using cookies. You can assume that your JS sets a cookie with some key-value pair like js-enabled=true
When the page gets loaded next time, if cookie does not contain js-enabled key then you know that JS is disabled on the page and server returns the content accordingly.
Now, your question:
After the page has loaded in order to hide content at the last minute?
Say even if you know JS is disabled on the browser, how will you hide the content. You again need JS to be executed to manipulate the DOM which is not possible I think when JS is disabled. So one of the solutions can be when your server knows that JS is disabled then return the page which does not have that content which you want to hide
There is a way to show a warning when javascript is disabled before loading: Write a div element with a warning that jscript is disabled and hide it with jscript while loading the webpage. It is not possible to show a warning when javascript is disabled, because javascript is needed to change any part of a webpage.
if your app can stand the hit of doing log checks - I would, say every minute or so, use ajax to call
the backend - which will then log a time. if the backend checks and the last log time is substantially off - then shut down the app.
I'm trying to make an extension for Google chrome which requires me to be able to identify the currently selected tab. I did this with the chrome.tabs.onSelectionChanged method, however when I switch windows this isn't fired. I plan to use chrome.windows.onFocusChanged to detect when the window changes then use the chrome.tabs.getSelected method. However the problem is that chrome.windows.onFocusChanged seems to be fired more than once. If I'm not mistaken, it returns window -1, then the first window created (usually 1), then the current window. If the first window is selected then it's fires -1, then 1.
Am I using the right method here? Is there a better way of doing this? If I stick with it I might need to keep track of how window changes which is a bit messy.
Kinda worked on my own solution for this. For anyone interested in doing something similar, what I did instead was to use the onFocusChanged as an indicator that there is a window change happening which then starts a requestListener. Using content scripts, I sent a request to the extension whenever there was a window.focus event indicating that the focus is already on that window. The requestlistener then just removes itself. Unfortunately this approach requires all tabs to send requests every time they get focus. Some more tweaking to fix that I guess but for the mean time I think that suffices since sending requests every time there is a change of focus doesn't seem to eat up that much resources.
We are currently using a meta refresh to initiate a download on a page, I read on Wikipedia that using this is not UX (user experience) friendly. So what is the way to have a download start after a few seconds when landing on a download page.
User interface-friendly way would:
Not spring an unannounced surprise to the user. So postpone the download by X seconds and clearly announce that.
This is done by setting up JavaScript logic to display a changing countdown to download. See below for details on implementation.
Allow user to control this by allowing immediate download
This is done by having the download timer announcement provide a widget (button or a link) to download immediately.
Keep the current page, by opening the download in a new window/tab.
The "kick off the download" logic should preferably be - instead of the obvious setting of window.location.href - something which opens a new window for the download. This way you allow the user to keep the main download landing page intact.
If possible, present a nice download widget
Instead of just pushing the URL of the download target, consider using custom download wisget like jQuery's jDownload plugin
To implement the changing countdown, do something like this:
Set up a variable for how long till download starts:
var DownloadIn = 10;
Set up a timer in JavaScript using setTimeout()`:
setTimeout("shouldWeDownload()", DownloadIn * 1000);
Subroutine shouldWeDownload() called from a timer will:
check if time period (stored in DownloadIn variable) is greater than zero.
If the time is NOT up (greater than zero), it will:
a. Check if a special "AlreadyDownloading" variable is set to true - this variable will be explained later. If true, simply exit.
b. print to a special DIV on the page - something very obvious and visible to the user - a message "XXX seconds left till the start of download. Click on this link to start the download".
c. Decrement DownloadIn variable
d. Set the timer again using the same setTimeout
If the time's up, kick off the download.
In addition, the "this link" link in the message would also immediately kick off the download. To make things clean, the "immediate dowload" onClick JS handler should set a special "AlreadyDownloading" variable which is checked in the logic above should be set to true, so we don't start a second download due to minor race conditions.
I don’t know of any research on what users expect, but I’d suggest mentioning that it’s a download in your initial download link, e.g.
Download my awesome track
(Maybe style that link like a big button, maybe even with an arrow pointing downwards in it: e.g. something like this.)
And then set your server to return that file with the Content-disposition header set to 'attachment' and the name of the file, so that the browser immediately lets the user know they’re downloading something:
Content-disposition: attachment; filename=kiss_from_a_rose__dubstep_remix.mp3
That way you don’t open a new page just to make the file download. The file downloads, the user’s still on the page where they were when it’s downloaded, everyone’s happy.
Fewer steps = fewer things for users to be confused by.
Using the browser’s UI = more chance that the user will have seen it before, and thus know what’s going on
unix user freindly? Depends entirely on the browser, and last time I checked, most/all linux browsers and safari worked fine with meta refresh.
Which is why most websites offer meta refresh with a download link.
I recently got a situation where I need to set a bit in a database from 1 to 0 on web page on close event and I found there is no such event but an unload event so I thought I can generate an AJAX call from it.
Now, when some one tries to close the browser, it should be closed instantly because of UE and if I will have AJAX request that will change a bit from 1 to 0 in database, it would probably be taking a second in my internet connection but some one on the other side can have slow connection and the browser will wait little longer prior to close. Am I right? Or the browser will be hidden and it will carry the AJAX request in the background?
Or if you think any other solution is available that would be helpful.
That is not a reliable way to do this. It's not guaranteed that the browser will make the request and it can also potentially detrimental to user experience.
Here's a page with details on better ways to accomplish this:
http://ajaxpatterns.org/Heartbeat
You could try popping up an alert() dialogue after firing off the AJAX event. That'd keep the browser open until the user could acknowledge the alert. But other than that, there's nothing you can do to prevent the browser from shutting down before the AJAX goes through (or fires off at all).