Javascript: how to overwrite page reload event? - javascript

What I mean is - when user clicks on some browser page reload/refresh button we do not want to reload page - we want to capture that event and call some function (for simple example one with some alert). I need it to work in IE6 and up and Chrome and Firefox3+ of course. How to do such thing (not using jQuery and other libs)?

It's not possible.
You can detect when an unload occurs, but you can't detect what caused the unload and you can't cancel it without the user's consent. For instance, typing a new address in the address box, clicking a link, submitting a form, selecting a bookmark or refreshing the page will all fire an onbeforeunload event.

You cannot. You can't change the operating system functionality from within any browser except IE.

Related

Javascript fake click which triggers affiliate pop-up is being blocked

My page has an affiliate pop-up whenever someone clicks anywhere on the page. This part works fine.
So then I created a script where if they haven't clicked on their own after a while it will simulate a click, thus triggering the pop-up. However, the browser can somehow tell that this is a fake click & auto-blocks the pop-up (but it works fine if you actually click on the page, the browser won't block the pop-up then).
I've tried various ways of simulating a real-world click in javascript but nothing works. Any ideas of how to stop it from blocking the pop-up?
You cannot a trigger false click event so that your popup is not blocked by the browser. This is a not possible.
Popups will only work if they originate from a trusted event that is an event that the user initiated. In your first case the user clicks on the page causing a trusted event which allows it to open. Your second case however the user has made no such action, so no trusted event and no popup.

Browser back and close event using jQuery

Trying to invalidate the session once click on the browser back button as well as browser close using jQuery.
How to capture the browser back button event and browser close event? Is there any advantage with respect to javascript?
Any help appreciated.
Hopefully this helps you:
http://api.jquery.com/unload/
The unload event is sent to the window element when the user navigates
away from the page. This could mean one of many things. The user could
have clicked on a link to leave the page, or typed in a new URL in the
address bar. The forward and back buttons will trigger the event.
Closing the browser window will cause the event to be triggered. Even
a page reload will first create an unload event.

Popup message when leaving page

I am looking to develop a small popup message which acts similar to the window.beforeunload function, to notify the user, that if they leave the current page, they will lose all of their data.
However the issue with the beforeunload event is it fires to often.
I would like to have the popup message fire only when a user closes the page, or clicks a link which takes them away from the current page, to ensure they are aware that their current action will result in the loss of the form data they have entered so far.
However beforeunload event goes further to fire when they refresh the page, which is not needed for this case, and also when the forum is submitted.
Could anyone advise me on the best way to develop this. I thought about using a basic confirm dialog and have it fire under the right circumstances, however is it possible to know if the user is refreshing the page, and if the forum is being submitted (without jQuery).
How can I have this dialog fire at the appropriate times?
Unfortunately, I don't think this is possible. The page unload events are very limited, for security reasons.
If you only want it to appear if the user added or changed formdata, why not check for changes in the data? If yes then return the question on beforeunload, if not do nothing.
Assuming that the form isn't too complicated, you could save form data by using Ajax call, which means there will not be a page reload. So, beforeunload will then behave as it was designed to.

how can I prevent the user leaving the page when hitting the browser back button in Jquery Mobile?

Just wondering.
I have a page in Jquery Mobile which uses a popup that opens as a fullscreen page on smartphone displays:
Desktop/Tablet:
Smartphone:
Problem is, if the user views the page on smartphone, this looks like a real page. When the user hits the "back" button I provide, I'm just closing the popover. However, if the user hits the browser back button, he's leaving the page, because he never went a page down in the history.
Question:
Since I can't disable the browser back button, is there another way to create a browser history entry when the popover opens, so when the user presses the back button, I'm simply closing the popover and the browser history is back on the initial page vs. going "-1". If there are other workarounds to achieve this I'd also appreciate any suggestions.
Thanks!
Maybe what you can do is add the popover as a dialog page if the webpage is opened from a smartphone (you can use user-agent to check for this). You might want to check http://jquerymobile.com/test/docs/pages/page-dialogs.html That way it will be added to the browser history.
Try adding a live Vclick.
or
you could try disabling the class ui,
Example:
class="ui-disabled"

Is there anyway to prevent onbeforeunload event from triggering when using Internet Explorer

I have a function that is suppose to trigger when user closes their browser and I have put the code in the window.onbeforeunload function.
The thing is every time if I reloads the page in Internet Explorer, the onbeforeunload event will also trigger which is a problem because I only wants it to trigger only when the user closes or navigates away from the current page but not on a page refresh/reload.
Therefore I'm not sure if onbeforeunload is intended to trigger even on a page refresh/reload and if it is intended to, then is there another way to work round it?
Since you are relying on javascript as it is, you may want to look into resolving the issue as to why they have to refresh the page. You can use XMLHttprequest to refresh the content for them so that the desired onbeforeunload function is only called when it needs to be.
There's no smart way to work around it. Any unloading action on the page will fire the unload and beforeunload events and there's no way to tell the difference between a refresh and a navigation.
You could attempt a couple of things, but there's no 100% method. For instance, capturing the F5 or Ctrl+R keys would identify a refresh, for which you could unset the onbeforeunload handler, but it would not work for users who click the refresh/reload button on their toolbar. You could attach an event handler to all clicks on an <a> element or any <form> onsubmits, but this wouldn't help for users who type a new address into the address bar from your page.
Even if you use XMLHttprequest to refresh, IE has a problem. You have to call the javascript function that contains the XMLHttprequest, for example,
click to add content
will trigger an onbeforeunload event on IE, but not on Safari or Firefox.
One solution that'll work in some situations is to handle the event conditionally, turning it off when you want to load content then turning it back on
var guard = true;
function myOnbeforeunloadHandler()
{
if(guard)
{
return "you are about to leave the page and lose data";
}
}
function addContent()
{
getElementById("myDiv").html = "<p>some content</p>";
guard = true;
}
<a href="javascript:void(0) onclick="guard=false;addContent();> click to add content</a>

Categories

Resources