Можно ли определить, если у пользователя открыто несколько вкладок вашего сайта?

Question

Я просто думаю о процессе регистрации всего сайта.

Пользователь заходит на ваш сайт, регистрируется, а затем вы сообщаете ему, что отправили ему электронное письмо, и ему необходимо подтвердить свой адрес электронной почты. Поэтому он нажимает Ctrl + T , открывает новую вкладку, нажимает на кнопку Gmail fav, не читает ни слова из вашего длинного приветственного письма, но нажимает первую ссылку он видит. Gmail открывает ваш сайт в еще одной вкладке ...

Ему не нужны и не нужны две вкладки для открытия вашего сайта, он просто хочет просмотреть эту проклятую страницу, к которой вы запретили ему доступ, пока он не зарегистрируется.

Так что же нам делать? Я видел один сайт (но я забыл, что это было), который сделал действительно хорошую работу, и он фактически обновил первую открытую вкладку, без необходимости что-либо нажимать.

Я думаю, было бы неплохо, если бы мы могли определить, есть ли у пользователя открытая вкладка для вашего сайта, мы можем либо автоматически закрыть новую вкладку проверки, либо сказать ему, что он может закрыть ее, чтобы вернуться к другая его вкладка (которую мы сейчас обновили и вошли в него).

Или, возможно, когда он получил ваше досадное сообщение «проверьте свою электронную почту», он сразу же отправил свою электронную почту, заменив ваш сайт своей электронной почтой, прекрасно зная, что электронная почта снова свяжет его с сайтом. В этом случае мы не хотим закрывать вкладку, но, возможно, могли бы сохранить его местоположение и перенаправить его туда снова?

В любом случае, это всего лишь вариант использования ... вопрос все еще стоит. Можем ли мы определить, есть ли у пользователя открытая вкладка для вашего сайта?

---

Этот вопрос не о том, как обнаружить , когда пользователь завершил процесс регистрации. Ajax Polling или комета могут решить эту проблему. Я специально хочу знать, есть ли у пользователя открытая вкладка на вашем сайте или нет.

Answer 1

Я довольно опоздал на вечеринку здесь (более года), но я не мог не заметить, что вы пропустили невероятно простое и элегантное решение (и, вероятно, какой веб-сайт, который вы видели, использовали).

Используя JavaScript, вы можете изменить имя окна, которое вы открыли в данный момент:

window.name = "myWindow";

Затем, когда вы отправляете письмо с подтверждением, просто сделайте это (при условии, что вы отправляете электронное письмо в формате HTML):

<a href="verificationlink.php" target="myWindow">Verify</a>

Что должно привести к открытию verificationLink внутри окна, в которое ваш сайт уже был загружен, и если оно уже было закрыто, откроется новая вкладка с указанным именем окна.

Answer 2

Вы можете остановить функциональность страницы, когда пользователь открыл другую вкладку или другое окно или даже другой браузер

$(window).blur(function(){
    // code to stop functioning or close the page  
});

Answer 3

Вы можете отправлять запрос AJAX каждые X секунд с исходной вкладки, которая спрашивает сервер, получил ли он запрос от электронного письма.

Вы не можете автоматически закрыть вторую вкладку, ноВы можете попросить сервер через 3X секунд услышать, услышал ли он первую вкладку.

Answer 4

То, что у меня здесь есть, немного отличается от вас, но он определяет, осуществляется ли доступ к сайту в другой вкладке.В этом случае я хотел ограничить людей, использующих некоторые страницы центра обработки вызовов, только одной вкладкой.Это работает хорошо и чисто на стороне клиента.

// helper function to set cookies
function setCookie(cname, cvalue, seconds) {
    var d = new Date();
    d.setTime(d.getTime() + (seconds * 1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

// helper function to get a cookie
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

// Do not allow multiple call center tabs
if (~window.location.hash.indexOf('#admin/callcenter')) {
    $(window).on('beforeunload onbeforeunload', function(){
        document.cookie = 'ic_window_id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
    });

    function validateCallCenterTab() {
        var win_id_cookie_duration = 10; // in seconds

        if (!window.name) {
            window.name = Math.random().toString();
        }

        if (!getCookie('ic_window_id') || window.name === getCookie('ic_window_id')) {
            // This means they are using just one tab. Set/clobber the cookie to prolong the tab's validity.
            setCookie('ic_window_id', window.name, win_id_cookie_duration);
        } else if (getCookie('ic_window_id') !== window.name) {
            // this means another browser tab is open, alert them to close the tabs until there is only one remaining
            var message = 'You cannot have this website open in multiple tabs. ' +
                'Please close them until there is only one remaining. Thanks!';
            $('html').html(message);
            clearInterval(callCenterInterval);
            throw 'Multiple call center tabs error. Program terminating.';
        }
    }

    callCenterInterval = setInterval(validateCallCenterTab, 3000);
}

Answer 5

Чтобы конкретизировать ответ Джона, вот рабочее решение, которое использует простой JS и localStorage и обновляет DOM со счетчиком открытых в данный момент вкладок.Обратите внимание, что это решение определяет количество открытых вкладок / окон для данного домена в одном браузере, но не поддерживает счет в разных браузерах.

В нем используется событие хранилища, чтобы синхронизировать счет во всех открытых вкладках./ windows без необходимости обновления страницы.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
(function() {
    var stor = window.localStorage;
    window.addEventListener("load", function(e) {
        var openTabs = stor.getItem("openTabs");
        if (openTabs) {
            openTabs++;
            stor.setItem("openTabs", openTabs)
        } else {
            stor.setItem("openTabs", 1)
        }
        render();
    })
    window.addEventListener("unload", function(e) {
        e.preventDefault();
        var openTabs = stor.getItem("openTabs");
        if (openTabs) {
            openTabs--;
            stor.setItem("openTabs", openTabs)
        }
        e.returnValue = '';
    });
    window.addEventListener('storage', function(e) {
        render();
    })

    function render() {
        var openTabs = stor.getItem("openTabs");
        var tabnum = document.getElementById("tabnum");
        var dname = document.getElementById("dname");
        tabnum.textContent = openTabs;
        dname.textContent = window.location.host
    }
}());
</script>
</head>
<body>
<div style="width:100%;height:100%;text-align:center;">
    <h1 >You Have<h1>
        <h1 id="tabnum">0</h1>
    <h1>Tab(s) of <span id="dname"></span> Open</h1>
</div>
</body>
</html>

Answer 6

У пользователя все еще будет сеанс на сервере. Почему бы не сохранить местоположение пользователя до регистрации, и когда они подтвердят свою регистрацию, прочитайте местоположение вне сеанса и перенаправьте обратно на эту страницу. Никакой магии не требуется. Это, конечно, не то, что я ожидаю от процесса регистрации.

Answer 7

Можно отслеживать количество открытых вкладок вашего сайта, сохранив данные в localstorage каждой вкладки и считая их одинаково. Я создал github-репозиторий , который может отслеживать количество вкладок вашего сайта. пользователь открыл.

Чтобы использовать его, включите tab-counter.js на своей странице, и он начнет отслеживать количество открытых вкладок.

console.log(tabCount.tabsCount());

Answer 8

Чтобы добавить к другим ответам: Вы также можете использовать localStorage.Иметь такую ​​запись, как «OpenTabs».Когда ваша страница открыта, увеличьте это число.Когда пользователь покидает страницу, уменьшите ее.