เปิดป๊อปอัปและรีเฟรชหน้าพาเรนต์เมื่อปิดป๊อปอัป

95

ฉันเปิดหน้าต่างป๊อปอัปข้าง window.open ใน JavaScript ฉันต้องการรีเฟรชหน้าหลักเมื่อฉันปิดหน้าต่างป๊อปอัปนี้ (onclose event?) ฉันจะทำอย่างไร

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โดยใช้setIntervallike ในโซลูชันของ @ Zuul

— jchook

34

หน้าต่างป๊อปอัปไม่มีเหตุการณ์ปิดที่คุณสามารถฟังได้

ในทางกลับกันมีคุณสมบัติปิดที่ตั้งค่าเป็นจริงเมื่อหน้าต่างถูกปิด

คุณสามารถตั้งเวลาเพื่อตรวจสอบคุณสมบัติที่ปิดแล้วและดำเนินการดังนี้:

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 ที่ใช้งานได้นี้!

— Zuul
แหล่งที่มา

1

ฉันไม่ต้องการใช้ตัวจับเวลา! ความคิดอื่น ๆ ?

— ArMaN

1

ค่อนข้างแฮ็ค แต่ฉันคิดว่าการใช้ตัวจับเวลาจะทำงานได้ดีที่สุดในทุกเบราว์เซอร์

— เคย์

นอกจากนี้ยังเป็นทางออกที่ดีที่สุดหากป๊อปอัปมีหลายหน้าก่อนที่จะปิดเนื่องจากเหตุการณ์ onunload จะถูกทริกเกอร์หลังจากที่ผู้ใช้ออกจากหน้าแรกเท่านั้น

— AntonChanning

14

ในหน้าย่อยของคุณให้ใส่สิ่งเหล่านี้:

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

และ

<body onbeforeunload="refreshAndClose();">

แต่ในการออกแบบ UI ที่ดีคุณควรใช้การปิด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 ต้องการแนบเหตุการณ์เพื่อปิดหน้าต่าง แต่ฉันเชื่อว่าการใช้ปุ่มเป็นการออกแบบ UI ที่ดีกว่า อย่างไรก็ตามฉันรวมรหัสสำหรับทั้งคู่ กรุณาแนะนำ.

— Ray Cheng

ฉันใช้ <body onbeforeunload = "refreshAndClose ();"> <script type = "text / javascript"> function 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()''>

เมื่อหน้าต่างปิดลงจะรีเฟรชหน้าต่างหลัก

— Patrick Kershner
แหล่งที่มา

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;

— cranz
แหล่งที่มา

จะไม่ทำงานหากผู้ใช้สามารถติดตามลิงก์ในหน้าต่างที่เปิดอยู่ และฉันค่อนข้างแน่ใจว่ามีเหตุการณ์ยกเลิกการโหลดก่อนที่จะโหลด URL เป้าหมายเป็นครั้งแรกในขณะที่คุณปล่อยเกี่ยวกับ: ว่างไว้โดยปริยาย (+1 สำหรับการกล่าวขวัญ SOP)

— เคย์

2

ในกรณีของฉันฉันเปิดหน้าต่างป๊อปอัปเมื่อคลิกที่ปุ่มลิงก์ในหน้าหลัก ในการรีเฟรชพาเรนต์เมื่อปิดลูกโดยใช้

window.opener.location.reload();

ในหน้าต่างลูกทำให้เปิดหน้าต่างลูกอีกครั้ง (อาจเป็นเพราะดูสถานะฉันเดาถูกต้องฉันถ้าฉันผิด) ดังนั้นฉันจึงตัดสินใจที่จะไม่โหลดหน้าเพจซ้ำในพาเรนต์และโหลดเพจอีกครั้งโดยกำหนด url เดียวกันให้

เพื่อหลีกเลี่ยงการเปิดป๊อปอัปอีกครั้งหลังจากปิดหน้าต่างป๊อปอัปสิ่งนี้อาจช่วยได้

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

— Jitendra Sawant
แหล่งที่มา

1

หากแอปของคุณทำงานบนเบราว์เซอร์ที่เปิดใช้ HTML5 คุณสามารถใช้postMessage ตัวอย่างที่ให้มานั้นค่อนข้างคล้ายกับของคุณ

— คริสหลี่
แหล่งที่มา

"มิฉะนั้นคุณจะไม่สามารถสื่อสารระหว่างหน้าต่างต่างๆได้" มันผิด. เทคนิคนี้ยังคงเป็นไปได้แม้ว่าฉันจะแนะนำคำตอบจาก @Moses

— gengkev

-1 ลบ หากคุณให้เป็นตัวอย่างเล็ก ๆ คุณยังจะได้รับ 1 ;-)

— เคย์

ไม่เป็นไร. แต่ฉันไม่คิดว่า window.opener ใช้ได้สำหรับ IE ฉันจะลองดู

— Chris Li

1

@kay ใช้งานได้ดีใน IE7, 8 ดีมากฉันไม่รู้มาก่อน +1 สำหรับโมเสส

— Chris Li

1

@ArMaN: jsfiddle.net/8c2e4/10ใช้ window.opener คุณสามารถใช้สิ่งนี้เพื่อทดสอบสภาพแวดล้อมของคุณ

— Chris Li

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
แหล่งที่มา