0

How to make the onbeforeunload function be disabled for my own pages and work only for external ones? How to make disable the code that OG Sean gave here: "Are you sure you want to leave this page?" functions for cancel and OK 

<script>
    window.onbeforeunload = function(e) {
      return 'Are you sure you want to leave this page?  You will lose any unsaved data.';
    };
</script>

for all my subpages like (domain.com/shop; domain.com/about-us; and domain.com/contact), and enable it only for when you click on the "x" button to close the page? or when you try to type another URL in the address bar?

thanks in advance for the help :)

Community
  • 1
  • 1
bloodstriker
  • 33
  • 2
  • 10
  • Please search thoroughly before posting. This question has been asked and answered several times. More about searching [here](/help/searching). – T.J. Crowder Jan 23 '17 at 19:25
  • [Here's one](http://stackoverflow.com/questions/20095079/conditional-onbeforeunload-event-in-a-page), [here's another](http://stackoverflow.com/questions/2663728/how-to-display-onbeforeunload-dialog-when-appropriate). – T.J. Crowder Jan 23 '17 at 19:35
  • Not exactly, T.J... They want to only show an onbeforeunload message **when the user is leaving their website**. – user2867288 Jan 23 '17 at 20:34
  • true - i found this, but i cant found the answer of my problem - to make the function check if its my own domain or not... – bloodstriker Jan 24 '17 at 09:22
  • i searched everywhere, and i couldnt find anything that works - i did try everything that i could and that i found here in the website. as i said before - i spent whole day to try figure it out. ... thanks one more time- hope some1 can help – bloodstriker Jan 24 '17 at 09:23

1 Answers1

0

Ok, so as promised I'll explain the solution given in this question : Confirm Leave on External Links in Wordpress.

The onbeforeunload event is special in the way that you can't cancel it or interfere in a meaningful way. If the user wants to leave, they'll leave and the browser won't let you interfere more than displaying a box. That is a security concern so you can't hold the user captive in your app.

what you CAN do is :

  1. have a onbeforeunload event that returns something (anything), so that when the user types a new address or otherwise navigates, you can warn them with the browser default box
  2. listen to every link in your app, and maybe prevent these with a custom box.
  3. if the user is sure, disable onbeforeunload so they don't have to click twice.

I've done a [small jsfiddle demonstrating this] (https://jsfiddle.net/6672ovrn/3/) (open the developper tools with [F12] to see the console output). The S.O. answer I linked up there works in the same way but it uses jquery's $("a").on("click", func(){}); to add the check automatically to all <a>, instead of having <a href="..." onclick="check" >go!</a>everywhere in the html.

Hope that helps.

Community
  • 1
  • 1
Boris
  • 1,161
  • 9
  • 20
  • so i did try the code in jsfiddle, but it didnt work. please tell me what exactly i should do? My domain name is http://neofollica.com/ may be i should implement it somewhere in the code? huh Thanks in advance 1 more time. U are really helpful and obviously i am a bit dumm cos i cant figure it out :(. – bloodstriker Feb 02 '17 at 16:42
  • hi @bloodstriker, I just saw that the fiddle link was broken, is that what you mean by "it didn't work"? also I updated it, so that the local link isn't checked, and anchor links don't break the behavior – Boris Feb 06 '17 at 12:15
  • The behavior I expect (only tested in chrome) is : local link and anchor link should navigate without stopping the user. external link(checked) should show "are you sure???" and external link(unchecked) should show the browser's default "unsaved data" message. also, reloading the fiddle, and typing a new address should show the default warning. What are you seeing ? – Boris Feb 06 '17 at 12:25