Detect page refresh or new load using PHP or Javascript

Question

How to detect tab close in browsers using PHP or Javascript. In other words, How to find if page is refreshed or opened in new tab. I am concerned about tab, not browser.

Answer 1

You can have a listener for the window.onbeforeunload event. You won't be able to detect if the tab is closed from JavaScript, though.

Answer 2

Actually Javascript can tell you if a Tab is going to be closed. Two different methods need to be used (one for IE and one for everyone else).

I wrote a Javascript process to do just what you are asking. Pre-requisites for the process is jQuery and one plugin (livequery - because some of the HTML is dynamically generated after page load). Anyway, here is the js file that does all this (checkclosing.js):

// Global Var
var bodyclicked = false;
var datachanged = false;
var nodirtycheck = false;

// Start the engines :)
$(document).ready(function () {
    init();
});

function init() {
    bindEvents();
}

function bindEvents() {
    // Bind the onClick event for the DOM body
    $(document).livequery(function () {
        bodyclicked = true;
    });

    // Bind our event handlers for the change and reset events
    $(':input').not('.excludeFromDirtyCheck').bind('change', function () {

        if ($(this).hasClass('dataLoader')) {
            if (!datachanged) {
                return;
            }
        }

        datachanged = true;

        $(".hidDataChanged").val("True");
    });

    $(':reset,:submit').bind('click', function () {
        // .NET renders some ASP Buttons as Submit and Reset types
        if ($(this).hasClass('notSubmit')) {
            return;
        }

        if ($(this).hasClass('notReset')) {
            return;
        }

        datachanged = false;

        $(".hidDataChanged").val("False");
    });

    // Must have the livequery plugin referenced for this to work
    $('.resetchangedform').livequery('click', function (event) {
        //alert("resetchanged"); // FIXME
        datachanged = false;

        // Set our hidden input (on the Administration Master page)
        $(".hidDataChanged").val("False");
    });

    // Must have the livequery plugin referenced for this to work
    $('.setchangedform').livequery('click', function (event) {
        //alert("setchanged"); // FIXME
        datachanged = true;

        // Set our hidden input (on the Administration Master page)
        $(".hidDataChanged").val("True");
    });

    // Must have the livequery plugin referenced for this to work
    $('.excludeFromDirtyCheck').livequery('click', function (event) {
        nodirtycheck = true;

    });

    // Must have the livequery plugin referenced for this to work
    $('.notSubmit').livequery('click', function (event) {
        nodirtycheck = true;
    });

    // Must have the livequery plugin referenced for this to work
    $('.dataReloader').livequery('change', function (event) { 
        nodirtycheck = true;
    });

    window.onbeforeunload = function () {
       //alert("datachanged = " + datachanged + " | nodirtycheck = " + nodirtycheck + " | hidDataChanged = " + $(".hidDataChanged").val());

        // Check the hidden textbox
        if ($(".hidDataChanged").val() == "True") {
            datachanged = true;
        }

        if (nodirtycheck) {
            nodirtycheck = false;
        }
        else {

            if (navigator.appName == "Microsoft Internet Explorer") {
                // IE
                if (bodyclicked) {
                    if (datachanged) {
                        return "You may have unsaved changes...";
                    }
                }
                else {
                    bodyclicked = false;
                    // Do Nothing
                }
            }
            else {
                // Not IE
                if (datachanged) {
                    return "You may have unsaved changes...";
                }
                else {
                    // Do Nothing
                }

            } //if (navigator.appName == "Microsoft Internet Explorer") {

        } //window.onbeforeunload = function () {

    }     // if (nodirtycheck) {

}

Then just include a reference to this file on any page you want to check for a tab close on:

This was built to help prevent users from navigating away from pages with unsaved changes to form values. Yes, I know that most of the time, it is bad practice to prevent the user from closing a tab or navigating away, but in this case - the users requested it and this is an internal application that is not for public consumption.

Any controls that you don't want to be checked for changes prior to letting the user close the tab or navigate away would just be given a class name of excludeFromDirtyCheck.

This may be more than you need, but you can strip off the parts that aren't useful. The basic premise is the same.