LINUX.ORG.RU
решено Форум — Web-development  

Привязать событие на закрытие всплывающего окна

 ,


0

1

Привет, есть такая страница: 

<doctype html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button class='empty'>empty</button>
        <button class='popup'>popup</button>
    </body>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            $('body button').on('click', function(e) {
                var p = window.open(
                    $(e.target).is('.empty') ? '' : 'popup.html', 
                    "title", 
                    "width = 400, height=200"
                );
                
                $(p).on('unload', function(e){
                    console.log(e.target, 'unload');
                });
            });
        });
    </script>
</html>

здесь при нажатии на кнопки empty/popup создается новое окно средствами js (window.open), а также вешается событие на unload ($(p).on('unload')), т.е. при закрытии окна, в консоль должно выводиться сообщение.

Но возникает проблема. При создании пустого окна событие unload обрабатывается как надо, и в появляется только при закрытии всплывающего окна. Однако, если открывать всплывающее окно с адресом страницы (popup.html), то событие отрабатывает почти мгновенно после открытия окна и соответственно не срабатывает при закрытии самого окна.

Кто-нибудь подскажет как решить проблему?

upd. popup.html

<doctype html>
<html>
    <head></head>
    <body>body</body>
</html>

Скорее всего, unload срабатывает на завершение формирования dom в новом окне. Но как это предотвратить?



Последнее исправление: msgascii (всего исправлений: 2)
← Symfony server deployment
Существует ли такой робот-краулер-граббер-картинок или нужно писать самому? →

Для начала надо перестать подключать целый жквери ради одного onbeforeunload.
А потом надо открыть для себя хотя бы отладчик в браузере и посмотреть что происходит построчно.
В ванили таких проблем нет.

Goury ★★★★★
()
Ответ на: комментарий от Goury

Для начала надо перестать подключать целый жквери ради одного onbeforeunload.

Допустим, что на странице будет еще код, не только этот. Я не намереваюсь писать костыли, написанные еще до меня.

В ванили таких проблем нет.

ничего не изменилось, вот мой код: 

<doctype html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button class='empty'>empty</button>
        <button class='popup'>popup</button>
    </body>
    <script>
        window.addEventListener('DOMContentLoaded', function(){
            var els = document.querySelectorAll("body button");
            for(var i = 0; i < els.length; i++) {
                els[i].addEventListener('click', function(e){
                    var addr = e.target.getAttribute('class') == "popup" ? "popup.html" : "";
                    
                    var p = window.open(addr, "title", "width = 400, height=200");
                    
                    p.addEventListener('unload', function(e) {
                        console.log(p.document, 'unload');
                    });
                    
                })
            }
        });
    </script>
</html>

Покажи свой?

msgascii
() автор топика
Ответ на: комментарий от Goury

спасибо, вроде бы помогло.

Причин было две: 1 - действительно нужно было использовать beforeunload, 2 - нужно было работать через веб-сервер, т.к. до этого страница открывалась как обычный хтмл-документ.

msgascii
() автор топика

А с другой стороны вроде бы и не решено. Если вместо popup.html указывать к примеру http://ya.ru, то событие вообще не происходит.

msgascii
() автор топика

В общем, написал вот такой костыль. Но все же хотелось бы нормальное решение. 

<doctype html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button id='popup'>popup</button>
    </body>
    <script>
        var p;
        var interval;
        function checkWindowLocation() {
            console.log('check', p.location);
            
            if (p.location === null) {
                clearInterval(interval);
                console.log('stop');
            }
            
        }
        window.addEventListener('DOMContentLoaded', function(){
            document.getElementById("popup").addEventListener('click', function(e){
                p = window.open("http://ya.ru", "title", "width = 400, height=200");
                interval = setInterval(checkWindowLocation, 500);        
            });
        });
    </script>
</html>

msgascii
() автор топика
Ответ на: комментарий от Goury

да, это косяк лисы. Но beforeunload все же не срабатывает.

msgascii
() автор топика

решение снова найдено. 

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button id='popup'>popup</button>
    </body>
    <script>
        var p;
        var interval;
        function checkWindowLocation() {
            console.log('check', p.location);
            
            if (p.closed) {
                clearInterval(interval);
                console.log('stop');
            }
            
        }
        window.addEventListener('DOMContentLoaded', function(){
            document.getElementById("popup").addEventListener('click', function(e){
                p = window.open("", "title", "width = 400, height=200");
                p.document.location = "http://ya.ru";
                interval = setInterval(checkWindowLocation, 500);
            });
        });
    </script>
</html>
Необходимо просто проверять значение свойства <window>.closed

msgascii
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Symfony server deployment
Web-development
Существует ли такой робот-краулер-граббер-картинок или нужно писать самому? →