Открыть всплывающее окно и обновить родительскую страницу при закрытии всплывающего окна

95

Я открыл всплывающее окно с помощью window.open в JavaScript, я хочу обновить родительскую страницу, когда закрою это всплывающее окно. (Событие onclose?) Как я могу это сделать?

window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");

javascript html javascript-events

— ArMaN
источник

1

Пожалуйста, проверьте это: stackoverflow.com/questions/18321323/… может кому-то помочь

— NoNaMe

233

Вы можете получить доступ к родительскому окну, используя window.opener , поэтому напишите что-то вроде следующего в дочернем окне:

<script>
    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
    }
</script>

— Моррисон Коул
источник

Я не знал window.opener, спасибо! Я всегда помещаю окно вызывающего абонента в переменную в contentWindow дочернего элемента. : - /

— kay

3

Если вы не контролируете JavaScript на странице ребенка (например , поток OAuth) , то вам нужно будет проверить , popupWindow.closedиспользуя , setIntervalкак в @ растворе Zuul в.

— jchook

34

Во всплывающем окне нет события закрытия, которое вы могли бы прослушать.

С другой стороны, есть свойство closed, для которого устанавливается значение true, когда окно закрывается.

Вы можете установить таймер, чтобы проверить это закрытое свойство, и сделать это следующим образом:

var win = window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no");   
var timer = setInterval(function() {   
    if(win.closed) {  
        clearInterval(timer);  
        alert('closed');  
    }  
}, 1000);

Посмотрите этот рабочий пример Fiddle !

— Зуул
источник

1

я не хочу использовать таймер! любая другая идея?

— ArMaN

1

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

— kay

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

— AntonChanning

14

на своей дочерней странице поместите эти:

<script type="text/javascript">
    function refreshAndClose() {
        window.opener.location.reload(true);
        window.close();
    }
</script>

а также

<body onbeforeunload="refreshAndClose();">

но в качестве хорошего дизайна пользовательского интерфейса вам следует использовать Close, buttonпотому что он более удобен для пользователя. см. код ниже.

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            window.opener.location.reload(true);
            window.close();
        });
    });
</script>

<input type='button' id='btn' value='Close' />

— Рэй Ченг
источник

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

— gengkev

@gengkev, я знал, что OP хотел привязать событие к закрытию окна, но я считаю, что использование кнопки - лучший дизайн пользовательского интерфейса. однако я включил код для обоих. пожалуйста, порекомендуйте.

— Рэй Ченг

Я использовал <body onbeforeunload = "refreshAndClose ();"> <script type = "text / javascript"> функцию refreshAndClose () {window.opener.location.reload (true); } self.close (); </script>

— steve0nz

3

Я использую это:

<script language='javascript'>
var t;
function doLoad() {
t = setTimeout("window.close()",1000);
}

</script>
<script type="text/javascript">
function refreshAndClose() {
    window.opener.location.reload(true);
    window.close();
}
</script>
<body onbeforeunload="refreshAndClose();" onLoad='doLoad()''>

когда окно закрывается, обновляет родительское окно.

— Патрик Кершнер
источник

2

window.open вернет ссылку на вновь созданное окно при условии, что открытый URL-адрес соответствует политике того же происхождения .

Это должно работать:

function windowClose() {
    window.location.reload();
}

var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;

— кранц
источник

Не сработает, если пользователь сможет переходить по ссылкам в открывшемся окне. И я совершенно уверен, что перед первой загрузкой целевого URL возникает событие выгрузки, поскольку вы неявно оставляете about: blank. (+1 за упоминание СОП)

— kay

2

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

window.opener.location.reload();

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

Чтобы избежать повторного открытия всплывающего окна после закрытия всплывающего окна, это может помочь,

window.onunload = function(){
    window.opener.location = window.opener.location;};

— Джитендра Савант
источник

1

Если ваше приложение работает в браузере с поддержкой HTML5. Вы можете использовать postMessage . Приведенный здесь пример очень похож на ваш.

— Крис Ли
источник

«В противном случае вы не сможете общаться между собой через разные окна». неправильно. Этот метод все еще возможен, хотя я бы порекомендовал ответ от @Moses

— gengkev

-1 удалено. Если вы приведете небольшой пример, вы даже получите +1 ;-)

— kay

Ничего. Но я не думаю, что window.opener подходит для IE. Я попробую.

— Крис Ли

1

@kay, отлично работает в IE7, 8. Очень хорошо, я этого раньше не знал. +1 для Моисея.

— Крис Ли

1

@ArMaN: jsfiddle.net/8c2e4/10 , используйте window.opener. Вы можете использовать это для тестирования своей среды.

— Крис Ли

1

Попробуй это

        self.opener.location.reload();

Откройте родительский элемент текущего окна и перезагрузите местоположение.

— nmkyuppie
источник

0

Вы можете перейти на главную страницу с помощью родительской команды (родительское окно - это окно) после шага, вы можете сделать все ...

    function funcx() {
        var result = confirm('bla bla bla.!');
        if(result)
            //parent.location.assign("http://localhost:58250/Ekocc/" + document.getElementById('hdnLink').value + "");
            parent.location.assign("http://blabla.com/" + document.getElementById('hdnLink').value + "");
    }

— Хамит ИЛДИРИМ
источник

0

Вы можете использовать приведенный ниже код на родительской странице.

<script>
    window.onunload = refreshParent;
    function refreshParent() {
      window.opener.location.reload();
    }
</script>

— мукофа
источник

0

Следующий код сможет обновить сообщение о закрытии родительского окна:

function ManageQB_PopUp() {
            $(document).ready(function () {
                window.close();
            });
            window.onunload = function () {
                var win = window.opener;
                if (!win.closed) {
                    window.opener.location.reload();
                }
            };
        }

— UJS
источник