Buka popup dan segarkan halaman induk pada close popup

95

Saya membuka jendela popup demi jendela. Buka di JavaScript, saya ingin menyegarkan halaman induk saat menutup jendela popup ini. (Onclose event?) Bagaimana cara melakukannya?

window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
javascript html javascript-events ArMaN
sumber
1
Silakan periksa ini: stackoverflow.com/questions/18321323/… mungkin membantu seseorang
NoNaMe

Jawaban:

233

Anda dapat mengakses jendela induk menggunakan ' window.opener ', jadi, tulis sesuatu seperti berikut di jendela anak:

<script>
    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
    }
</script>
Morrison Cole
sumber
Saya tidak tahu window.opener, terima kasih! Saya selalu menempatkan jendela pemanggil dalam variabel di jendela konten anak. : - /
kay
3
Jika Anda tidak mengontrol JavaScript pada halaman anak (misalnya aliran OAuth) maka Anda perlu memeriksa popupWindow.closedpenggunaan setIntervallike dalam solusi @ Zuul.
jchook
34

Jendela pop-up tidak memiliki acara tutup apa pun yang dapat Anda dengarkan.

Di sisi lain, ada properti tertutup yang disetel ke true saat jendela ditutup.

Anda dapat menyetel pengatur waktu untuk memeriksa properti tertutup itu dan melakukannya seperti ini:

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);

Lihat contoh Fiddle yang berfungsi ini !

Zuul
sumber
1
saya tidak ingin menggunakan timer! ada ide lain?
ArMaN
1
Agak hackish tapi saya pikir menggunakan timer akan bekerja paling baik di semua browser.
kay
Ini juga merupakan solusi terbaik jika pop-up memiliki beberapa halaman sebelum ditutup, karena peristiwa onunload hanya dipicu setelah pengguna keluar dari halaman pertama.
AntonChanning
14

di halaman anak Anda, letakkan ini:

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

dan

<body onbeforeunload="refreshAndClose();">

tetapi sebagai desain UI yang bagus, Anda harus menggunakan Close buttonkarena lebih ramah pengguna. lihat kode di bawah ini.

<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' />
Ray Cheng
sumber
ketika jendela popup ditutup, bukan ketika pengguna mengklik tombol untuk menyegarkan halaman dan menutup jendela popup
gengkev
@ gengkev, saya tahu OP ingin melampirkan acara ke window close, tapi saya percaya menggunakan tombol adalah desain UI yang lebih baik. Namun, saya menyertakan kode untuk keduanya. mohon saran.
Ray Cheng
Saya menggunakan <body onbeforeunload = "refreshAndClose ();"> <script type = "text / javascript"> function refreshAndClose () {window.opener.location.reload (true); } self.close (); </script>
steve0nz
3

Saya menggunakan ini: 

<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()''>

ketika jendela menutupnya kemudian menyegarkan jendela induk.

Patrick Kershner
sumber
2

window.open akan mengembalikan referensi ke jendela yang baru dibuat, asalkan URL yang dibuka sesuai dengan Kebijakan Asal yang Sama .

Ini harus bekerja:

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

var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;​
cranz
sumber
Tidak akan berfungsi jika pengguna dapat mengikuti tautan di jendela yang terbuka. Dan saya cukup yakin acara unload dilemparkan sebelum URL target pertama kali dimuat, karena Anda secara implisit membiarkan about: kosong. (+1 untuk menyebutkan SOP)
kay
2

Dalam kasus saya, saya membuka jendela sembulan saat mengklik tombol tautan di halaman induk. Untuk menyegarkan orang tua saat menutup anak menggunakan

window.opener.location.reload();

di jendela anak menyebabkan membuka kembali jendela anak (Mungkin karena Status Tampilan saya kira. Perbaiki saya Jika saya salah). Jadi saya memutuskan untuk tidak memuat ulang halaman di induk dan memuat halaman itu lagi menetapkan url yang sama untuk itu.

Untuk menghindari popup terbuka lagi setelah menutup jendela pop up, ini mungkin membantu,

window.onunload = function(){
    window.opener.location = window.opener.location;};
Jitendra Sawant
sumber
1

Jika aplikasi Anda berjalan di browser yang mendukung HTML5. Anda dapat menggunakan postMessage . Contoh yang diberikan di sana sangat mirip dengan Anda.

Chris Li
sumber
"Jika tidak, Anda tidak dapat berkomunikasi di antara jendela yang berbeda." salah. Tekniknya masih memungkinkan, meskipun saya merekomendasikan jawaban dari @Moses
gengkev
-1 dihapus. Jika Anda memberikan contoh kecil, Anda bahkan akan mendapatkan +1 ;-)
kay
Lupakan. Tapi menurut saya window.opener tidak OK untuk IE. Saya akan mencoba.
Chris Li
1
@ Oke, berfungsi dengan baik di IE7, 8. Bagus sekali, saya tidak tahu sebelumnya. 1 untuk Musa.
Chris Li
1
@ArMaN: jsfiddle.net/8c2e4/10 , gunakan window.opener. Anda dapat menggunakan ini untuk menguji lingkungan Anda.
Chris Li
1

Coba ini

        self.opener.location.reload();

Buka induk jendela saat ini dan muat ulang lokasinya.

nmkyuppie.dll
sumber
0

Anda dapat mencapai halaman utama dengan perintah induk (induk adalah jendela) setelah langkah Anda dapat membuat semuanya ...

    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 + "");
    }
Hamit YILDIRIM
sumber
0

Anda dapat menggunakan kode di bawah ini di halaman induk.

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

Kode berikut akan mengatur untuk menyegarkan posting jendela induk tutup:

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