How do I stop a page from unloading with standardized JavaScript (Not `onbeforeunload`)

Question

Before you relink me, I've read questions like How do I stop a page from unloading (navigating away) in JS?, but they deal with HTML4 and below. I want an answer that utilizes the HTML5 event attribute onunload. I also want this to be as pure as possible, that is without external libraries or plugins like jQuery or Flash and only using standardized code (PURE HTML, CSS, and JavaScript, nothing platform-dependant).

Before you tell me to use onbeforeunload, note that it is NON-STANDARD, and therefore does not fit my criteria as described above. It does NOT work on all browsers, especially those made before IE implemented it.

Question

On my site, I have several music players, and if any one of them is playing when the user attempts to navigate away from the page, I want to popup a dialog box ensuring that they intended this and that they understand that this will stop the audio stream, and if they choose "yes" or "OK", it proceeds with the navigation, but if they click "no" or "Cancel", it stays on the same page and keeps playing the audio without a break. How do I use JavaScript to cancel the page unloading WITHOUT USING ONBEFOREUNLOAD?

Code so far

I have the following code so far, but no idea how to stop unloading:

<!DOCTYPE HTML><html>
<head>
    <script><!-- Loading Scripts -->
    function unloadTasks(){
        window.alert(":" + playing + ":");
        if (playing && !window.confirm("A podcast is playing, and navigating away from this page will stop that. Are you sure you want to go?"))
            window.alert("Here is where I will stop the page from unloading... somehow");
    }
    </script>
    <script><!-- Player Scripts -->
    var playing = false;
    function logPlay(){
        playing = isPlaying("e1audPlayer");
    }
    function isPlaying(player){
        return document.getElementById(player).currentTime > 0 && !document.getElementById(player).paused && !document.getElementById(player).ended;
    }
    </script>
</head>
<body onunload="unloadTasks()">
<audio id="e1audPlayer" style="width:100%;" controls="controls" preload="auto" onplaying="logPlay()" onpause="logPlay()">
    <source src="http://s.supuhstar.operaunite.com/s/content/pod/ADHD Episode 001.mp3" type="audio/mpeg"/>
    <source src="http://s.supuhstar.operaunite.com/s/content/pod/ADHD Episode 001.ogg" type="audio/ogg"/>
    Your browser does not support embedded audio players. Try <a href="http://opera.com/">Opera</a> or <a href="http://chrome.com/">Chrome</a>
</audio>
<a href="http://example.com/">Link away</a>
</body>
</html>

Working example

You need `onbeforeunload`, *not* `onunload`. `onunload` fires after the browser has already committed to unloading the page, and cannot request a cancel. — zwol, Nov 06 '11 at 22:24
If you can't use `onbeforeunload`, I do not believe there is any way to do what you want. — zwol, Nov 07 '11 at 16:05

score 1 · Answer 1 · answered Nov 06 '11 at 22:23

1

You should be using onbeforeunload to prompt the user with the message.

answered Nov 06 '11 at 22:23

epascarello

204,599
20
195
236

1

Using alert in onbeforeunload actually not works reliable. One of the last Mozilla browsers disabled this. – FloydThreepwood Nov 06 '11 at 22:41
@FloydThreepwood No where do I mention an alert. There should be no reason for an alert with unbeforeunload, the message should be in the onbeforeunload prompt. – epascarello Nov 07 '11 at 00:56
@epascarello No Link and no code, I just assumed this. 'Prompt'ing something also has a multitude of meanings. Sorry, got it the other way round. – FloydThreepwood Nov 07 '11 at 20:34
@Supuhstar it is impossible without this event. You can not stop the unload, it is too late at the point you are trying to block it. You can not make web applications act like client applications. You are stuck with what the environment you are in and can use only the tools they give you. – epascarello Nov 07 '11 at 20:49
@epascarello I know... that's why I'm asking if there are any tools they gave me which will stop unloading. – Ky - Nov 07 '11 at 22:57
@Supuhstar yes, that even is onbeforeunload ;) – epascarello Nov 08 '11 at 14:44
`onbeforeunload` is not given to me, by your definition above, as my environment is the standard one. – Ky - Nov 09 '11 at 21:29

score 0 · Accepted Answer · answered Nov 06 '11 at 22:31

0

You can not prevent this entirely, however can notify the user via a popup that he should not reload. This is done with the onbeforeunload window event, best documented at MDN.

This will behave exactly like here on Stackoverflow, if you add some text to the answer textarea and than try to leave the page.

answered Nov 06 '11 at 22:31

FloydThreepwood

1,587
14
24

Than there is no way to solve your problem. Please remember: You are using the web, a incredible, dynamic and free medium, that is also splintered, broken and horrible sometimes. Try to rethink your reasoning, there is always a multitude of possibilities to accomplish usability. – FloydThreepwood Nov 07 '11 at 20:29

How do I stop a page from unloading with standardized JavaScript (Not `onbeforeunload`)

Question

Code so far

2 Answers2