Develop Reference

Adding additional function to exit page popup message

I want to add an additional function to a basic plain javascript exit page popup. Basically, I have my page set up so when a user tries to exit the page a message will appear saying "do you really want to leave" with the options "OK" and "Cancel". I want to set it up so when the user clicks OK it will redirect them to another website. I don't have a lot of experience coding so I'm not sure if this is possible. Here is the code that I'm using:
<h1 id="home">Warn before leaving the page</h1>
<script>
// Warning before leaving the page (back button, or outgoinglink)
window.onbeforeunload = function() {
return "Do you really want to leave?";
//if we return nothing here (just calling return;) then there will be no pop-up question at all
//return;
};
</script>
<a href="http://google.com/</a>
Any help will be appreciated, Thanks!

This is something you should avoid doing because it is bad user experience. Also this is a repeat of this post.

How to set AJAX interval so that it only refreshes if the page is still in focus?

I created a little script to keep the PHP session active even if the user does not refresh the page.
Here is the Javascript I'm using via PHP to keep the session alive:
echo 'setInterval(function(){$.post(\'/refreshTheSession.php\');},90000);';
It works fine, but I've noticed that it will keep calling the refreshTheSession.php script even if the page is not in focus, which I don't want because it means someone can leave a tab open with that page and keep the session alive indefinitely even if they are on a different tab doing something else.
I only want the session to stay alive if the user is still actively on the page in question.
Is it possible to do that? If so, how can I modify my code above to do that?

You don't tell me what "did not work" exactly, but the second link I commented, the Page Visibility API, will definitely do what you're asking for, as can be seen in this working example:
function isDocumentVisible() {
return !(document.hidden || document.webkitHidden || document.msHidden);
}
// this is what you'd output via PHP:
setInterval(function(){
if (isDocumentVisible()) {
$.post('/refreshTheSession.php');}
}
, 90000);
// for the sake of demonstrating that this example is indeed working:
window.setInterval(function() {
console.log(isDocumentVisible() ? "document is visible, refresh session" : "document is not visible, don't refresh session");
}, 1000);
Update: Using document.setFocus(), it would look like this:
// this is what you'd output via PHP:
setInterval(function(){
if (document.hasFocus()) {
$.post('/refreshTheSession.php');}
}
, 90000);
// for the sake of demonstrating that this example is indeed working:
window.setInterval(function() {
console.log(document.hasFocus() ? "document has focus, refresh session" : "document does not have focus, don't refresh session");
}, 1000);
Click into and out of the result iframe to see the focus change.

How can I prevent the JavaScript Prompt Leaving site From Appearing

Hey guys I am trying my best to figure it out how to remove the Javascript prompt/confirm that says "Do you want to leave this site?" like this:
https://prnt.sc/famast
Basically what's happening here is that when a modal got opened and the user click on "YES" it will redirect to a page. But I don't want the JavaScript confirmation but just redirect it to that page.
Any idea if you know some scripts that could make it happen?
Please help!

As other said above me, you can do it with onbeforeunload:
window.onbeforeunload = function() {
return '';
// The browser shows a pre-defined message so you don't have to write your own
}
You can also use addEventListener, in this way:
window.addEventListener('beforeunload', function() {
return '';
});
See an example (Link updated)

Trying to Create a Delayed Pop-up with Lightbox

I'm trying to create a lightbox with Jquery that will open an email collection pop-up to sign up for a newsletter. I think I understand how to make it work if someone clicks on a link but I don't want the visitor to have to click a link, I want it to pop up automatically after say a 5 second delay when the visitor lands on the page as seems common on many pages. This is a non CMS page. Can someone tell me the simplest way to go about this?

You can use setTimout() for that :
setTimeout(function(){
//This code will run in 5 seconds
}, 5000);
Here's a fiddle with an alert to demonstrate.

So to do this add this code:
setTimeout(function(){ popupFunction(); }, 5000);
to your jquery window ready event:
$(document).ready(function() {
//add code here
setTimeout(function(){ popupFunction(); }, 5000);
});
And then create a function that makes your popup work:
function popupFunction(){
//code here that works the popup
}

Prevent user from accidentally navigating away

My problem is a bit more complex than using the following simple JavaScript code:
window.onbeforeunload = function (e) {
return 'Are You Sure?';
};
On an e-commerce web page I would like to remind the user that he has items in the shopping cart so that he can change his mind before
closing the browser tab/window
navigating to another domain
The JavaScript method above does not solve my problem because it is evoked even when the user navigates within the domain.
Short:
User tries to close window -> Show dialog
User changes www.mydomain.com/shoppingcart url to www.google.com in the browser's address bar -> Show dialog
User navigates to www.mydomain.com/checkout with the checkout button or presses the back button in the browser -> Do NOT show the dialog

It's not possible to tell if a user is pressing the back-button or closing the tab and you don't have access to their intended location.
It is possible to stop the dialog from showing if an internal link is clicked though:
(function(){
function isExternal( href ) {
return RegExp('https?:\\/\\/(?!' + window.location.hostname + ')').test(href);
}
var returnValue = 'Are you sure?';
document.documentElement.onclick = function(e){
var target = e ? e.target : window.event.srcElement;
if (target.href && !isExternal(target.href)) {
returnValue = undefined;
}
};
window.onbeforeunload = function(){
return returnValue;
};
})();

Sorry there's no technical solution to your "problem."
It's not an accident when a user decides to leave your site, i.e. by typing a new URL, so stopping them to say "Hey, you haven't checked out yet" is kind of pointless.

I would suggest letting the visitor leave your website freely and simply remembering their information (DB, Sessions vars, etc). In terms of eCommerce that is the polite way of keeping customers.
If someone wants to leave your website, they will. Double-checking beforehand will likely only irritate the customer and lessen your chance of their return.

Since the beforeUnload-event object does NOT contain the location the user is trying to go to, one "hack" to do this would be to add click listeners to all links on your site, and disable the unload-listener in that handler. It's not very pretty, and it will probably not work if the user navigates with the keyboard, but it's my best guess at the moment.

It sounds like you'd need to use an onbeforeunload and then modify all your internal links to disable it. Probably the thing to do for the latter would be a jQuery event; making the actual hrefs run through JS would be terrible, not least because it'd defeat search engine crawling.

I was looking into this too, reason being we have some really stupid end users who fill out a whole web form then don't press the save button.
I found this is u r interested, seems like a good solution:
https://web.archive.org/web/20211028110528/http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm