I'm using a script to fade out the page content when user is actually leaving the page.
For that I tried using the beforeunload event.
It works fine when I navigate through my site, however I also found it triggering on application launch, such as skype button. Even though I never left the page yet...
What is the best way to validate onbeforeunload event against premature triggering?
I guess I should still use my:
$(window).one('beforeunload', function() {
// need to make some condition, if really leaving the page - execute
$('html.nojs').stop(true,false).css('overflow','hidden').animate({opacity:0},2000);
});
But I would need to use some condition... just cannot think of any...
EDIT:
Rmoved the link to the site
The animation does work, but if you go to any specific product and click skype button there you will see the it makes poo...
EDIT2:
The solution to this problem is to detect what triggered an before unload event. As I said, by writing some condition inside that call.
We must find a way to find out whether the event was triggered by external application call (such as skype button that tries to open application) or was it something else, like... for example:( link click, a button submit, script for location change, starting a search, hitting back/forward, or refreshing the page).
This the accepted answer for this question
Capture user response when using window.onbeforeunload
If you need to know what triggered the onbeforeunload event, you can have a global variable, then set it to true when you click on the Skype button. Then check it inside your onbeforeload event.
Related
I am trying to build a code that does a request when a cross-origin iframe is clicked and it directs the main window to a new page.
Since it's impossible to directly tap into Iframe click events, I thought of the following conditions as necessary:
page unload event occurs
the window is out of focus
Page unload (As far as I know) happens only when the current url is directed to some other url.
Now, this unload could happen by clicking any link. To restrict it to Iframes, I added the condition of window being out of focus.
addEventListener('beforeunload',(event) =>{
if(!(document.hasFocus())){
// Do Something
}
});
My question is, are their any limitations to this approach? If yes, then please suggest some more conditions to make it as close to reality.
For those of you, who are curious: I want to track clicks on Google AdSense Iframes on my website.
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.
I'm tying in to the onbeforeunload event in Javascript to disable control of the page during the unload process. We have a bunch of users who were editing data during this time and it was wreaking havoc on the product.
There are a bunch of links that show up on the page that have href="javascript:.....".
Clicking these links fires the disabling code, which makes the page impossible to use. Is there a way I can detect if the onbeforeunload event is navigating to a different page or just firing this Javascript?
Have every href link visit a piece of javascript code which does inspection on the href contents before it is executed.
event.target.href.startsWith('javascript')
If yes, submit the request, if not, do something else.
This isn't the most reliable way of checking for this but it works for my purposes:
$('*:focus').attr('href')
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>
I'm now dealing with a client request to open a form when the user leave the page.
Can that be done?
I think you are looking for
onbeforeunload event
An event that fires before the unload
event when the page is unloaded.
It seems to be impossible to create my own form and override onbeforeunload or anything else. I guess blocking it is the right thing though..
What we did is to pop a form and use the regular onbeforeunload. if the user wants to go - he will. But if he stays - he will get the questionnaire.
You can see the issue here too: onbeforeunload confirmation screen customization