browserExitWarning

[John Robin Dove]

Hi Clifton,

I have 2 issues with this. If I remember correctly, I believe it used to do exactly what I wanted in both Chrome and Firefox i.e. replace the standard message with my custom message but in newer versions this is no longer possible. That's not the problem and anyway you specify that this is the case in your notes. Because browserExitWarning sends a trigger I decided to use that to show a field containing the custom warning.

I then made a test app. and dispcovered two problems:

1) browserExitWarning is not executed! I have tried putting it in an object to be executed on load page, executing it from the load page event of the page, using onFirstIdle to send it a click, user event or trigger but nothing works. The only way it can be executed is by the user actually clicking on it!?

2) If browserExitWarning has been executed, it does what I want in Firefox, Edge and IE but not in Chrome. This might be trickier for you to fix as it seems they don't want us to show our own messages!

I've put the 9.01 tbk here: https://www.mediacours.com/tb_examples/exit.zip

I also have another problem which I'll post in a different section.
John

[Clifton]

browserExitWarning() can be a bit confusing. But once it is set up correctly, it is a powerful tool in certain situations.

Here is an explanation.
On pages where it is needed, you must execute it once to enable it. Indicate the object which should be triggered when the warning appears. The message parameter will be ignored in Firefox, Chrome and Edge, but will display in MSIE.

Field "test" on load page event actions

Image 1.png (33.46 KiB) Viewed 14890 times






Field "test" on trigger event actions

Image 3.png (13.11 KiB) Viewed 14890 times

Now here comes the interesting part. You must click somewhere (anywhere) on the page which executed the browserExitWarning() funtion to actually make Firefox and Chrome acknowledge it when the user tries to exit the browser. Most of the time this is not a problem because you will already have other interactivity designed on a page which uses this function anyway.

NOTE: MS Edge does NOT require the user to click on the page before acknowledging this function. That is really nice to know!! Whether this will continue in future versions remains to be seen.

Here is a screenshot of the code above running in Firefox:
Notice that the Field "test" is triggered FIRST and this caused your warning field to appear . . . THEN the browser issues its internal warning. Of course in Firefox, Chrome and Edge you cannot change the displayed text nor can you change the default button that is highlighted. This is by design in these browsers. MSIE allows you to change the message at least.

Firefox warning in response the browserExitWarning(); Chrome is similar!

Image 5.png (100.82 KiB) Viewed 14890 times

Then to disable the function for pages that do not need this functionality, you must execute browserExitWarning() again with the disable parameter set to true. The function is active on all pages once activated. So page navigation does not disable it. It must be disabled by calling it again. I recommend you just do it for the on unload page event.

[John Robin Dove]

Hi Clifton,

Thanks very much for your detailed reply. Appearances can be deceptive! I couldn't understand why browserExitWarning was functioning in the larger more complicated app. but not in the test app. Of course using the complicated app. involved some clicking! On the test app. there was nothing to click and it never occurred to me to click on the page!

On Firefox my warning message appears simultaneously with the "official" dialog box or probably just before in nanoseconds. Although the screen is dimmed the message is clearly visible so this compromise is quite adequate for my purposes.

Chrome, however, is a problem. It seems that the trigger arrives too late because my warning message is not shown until after the "official" dialog box is closed and if the user decides not to stay on the page, my message is never seen at all. I have done some tests and it seems the problem is deep rooted. I made this:

Code: Select all

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>This example demonstrates how to assign an "onbeforeunload" event to a body element.</p>

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<p id="demo"></p>


<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<button>Click</button>
     
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "!!!!! DO NOT LEAVE THIS PAGE !!!!!";
}

</script>

</body>
</html>

and tried it on Chrome and Firefox but it produces exactly the same results as the Toolbook app. so unless there is a beforebeforeUnload event I can't see how to solve the problem. I thought about putting a transparent field in the top righthand corner to show the message on mouseOver. This would perhaps work if the page is maximized but otherwise the user could still access the x button from the top. Is it possible to maximize the page programmatically or is this forbidden too?

John

[Clifton]

Not sure why this would be a problem because if you put the function on a page with interactivity, then there will always be a click event to invoke the function anyway. Of course, if the user does nothing then the information up until that page should have been handled by saving the data to db, cookie, or better yet to local browser storage.

As another possibility, try putting browserExitWarning() on unload of the previous page. It may be that the user click to navigate will be the event that triggers the function to be recognized by the browser.

[John Robin Dove]

Hi Clifton,

Thanks for all your replies. My problem in this case is not about saving data. It is to warn the user that if the page is closed before the exercise is completed it cannot be accessed again until an hour has passed. This is to prevent students allowing themselves unlimited attempts to do the exercise. I suppose it's not that important but it's frustrating because it used to work. I wonder why Chrome's exit warning seems to have priority over all other actions.

Also there is no previous page.

John

[Clifton]

You could make splash page for your application with a login or an enter button. This would force students to satsify all the requirements to make the exit warning appear. This is a pretty common technique used in web apps.

[John Robin Dove]

Yes, you're right. This is actually already explained in the help page should anyone choose to read it. I should give up trying to beat the guys at Chrome but I got a bit hooked on the challenge I've wasted some time (but not a lot) trying to come up with a solution. Not allowing any message other than the one chosen by Google is official policy as it states here https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeunload_dialogs The best I can do is change the document title. Everthing else seems to be forbidden. Firefox is more tolerant and executes changes to the document before the warning dialog is shown. Here's my latest test. https://www.mediacours.com/tb_examples/beforeunload.html I should now get back to doing some serious work!