Forum Moderators: open

Message Too Old, No Replies

Mind twister-Prevent Browser window closing

         

pallavr

10:38 am on Jan 9, 2007 (gmt 0)

10+ Year Member



Hi All,

I have a form where i want this functionality:
A)If the user clicks the browser closing button(X) then he should get a pop up stating that "Do you want to save the changes before closing the window"
B)If the user clicks "yes" on the confirmation Dialog then the window should not get closed but allow him to do some other functionality on the current page.
C)The pop up Diaolg should not appear when the user is navigating to some other page from the current page.

For the above scenario A) and B) using window.onbeforeunload = function(e) is ideal.But the problem is it also pops up when the user is navigating to another page.so scenario C) fails.

I applied another solution for preventing scenario C) taking the IE properties but sceanrio B) fails here the window will definitely get closed :
function unLoadFnc()
{
if(window.screenLeft < 10004)
{
alert("Refresh Coordinate: "+window.screenLeft);
}
else
{
alert("Closing Coordinate: "+window.screenLeft);
dispConfirm();
}

I know it is asking to much in a nut shell.But please respond to this mail if you know any alternative.I would really appreciate any help.

Best Regards,
Pallavi

cmarshall

3:52 pm on Jan 9, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'll poke around a bit, but I did find this exchange [webmasterworld.com] about it.

I don't know if you can prevent the main window from closing (but maybe you can with popups).

I'm not sure if you want to though. It's liable to upset your visitors. I've heard of pr0n sites hitting users with chains of popups when they try to exit. Never happened to me (because I always block popups ;-) )

whoisgregg

5:04 pm on Jan 9, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Not sure if this would work, but... You could add an onclick behavior to each link/form of the page that clears the window.onbeforeunload function.

It ought to work so long as the onclick fires before the window.onbeforeunload fires. :)

pallavr

10:44 am on Jan 10, 2007 (gmt 0)

10+ Year Member



Hi All,

I am thankful for your response.
I know the requirement is dubious.
But its the company's requirement.
I wanted to know for the last suggestion
how can i override this behaviour in the onclick method.
I am having argements with the functional team to remove this requirement but i just wanted some strong reason to support my logic.
As i have tried all possible means.

function winUnload(e){
var msg = document.getElementById("");
//IE
if(document.all) {
event.returnValue = "This window is going to close";
return false;
}
}

window.onbeforeunload = function(e){
winUnload(e);
}

Best Regards,
Pallavi

whoisgregg

2:35 pm on Jan 10, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You should add your onclick behaviors unobtrusively, but here's the gist of it. (It may work better to set it to equal undefined or an empty string... I haven't tested this.)

<a href="#" onclick="window.unbeforeunload=function(){};">click</a>

Fotiman

4:12 pm on Jan 10, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



pallavr, the onclick piece can be done unobtrusively using JavaScript. In my opinion, you should use something like the Yahoo UI Library's Event Utility to attach the handlers.

For example:


<script type="text/javascript" src="yahoo-min.js"></script>
<script type="text/javascript" src="dom-min.js"></script>
<script type="text/javascript" src="event-min.js"></script>
<script type="text/javascript">
var FOTI = function(){
/**
* Boolean flag that specifies whether the beforeunload should do it's thing
*/
this.doBeforeUnload = true;
return {
/**
* Perform actions on page load.
*/
init : function(){
// Get all of the links in the page
var pageLinks = YAHOO.util.Dom.getElementsBy(FOTI.isLink,'a');
// Attach 'click' event handlers for all links
YAHOO.util.Event.on(pageLinks,'click',function(){FOTI.doBeforeUnload = false;});
},
/**
* Method to determine if an element is a link
* @param {HTMLElement} el The element to test
*/
isLink : function(el){
return el.hasAttribute("href");
}
};
}();
// Call the init method on page load
YAHOO.util.Event.on(window,'load',FOTI.init,FOTI,true);

Then have your beforeunload event handler method check the FOTI.doBeforeUnload variable before doing anything.

Also, you should note that your beforeunload event handler will still be triggered if the user uses the Back/Forward/Home (etc.) buttons of his/her browser, or if the user clicks on one of their bookmarks/favorites.