一、頁面執行流程說明:
1.點擊父頁面a.html的“點我打開新窗口”按鈕-->彈出新窗口(b.html)
2.關閉彈出的新窗口b.html-->刷新父頁面a.html
二、實現步驟:
要點:1.給按鈕的點擊事件編寫函數f1(),用於彈出新窗口 window.open(新窗口的url,"",窗口參數)
2.給彈出的新窗口添加對關閉事件的監聽(window.onbeforeunload),通過該監聽來實現父頁面刷新
說明:要點2中的實現參考了qq_26676207轉載的js關閉當前頁面刷新父頁面
三、代碼:
父頁面 a.html
-
<head>
-
<script>
-
function f1(){
-
window.open("b.html","","width=800px,height=600px");
-
}
-
</script>
-
</head>
-
-
<body>
-
<button οnclick="f1()">點我打開新窗口</button>
-
</body>
子頁面 b.html
-
<head>
-
<script>
-
window.onbeforeunload = function() {
-
window.opener.location.reload();
-
};
-
</script>
-
</head>
-
-
<body>
-
<h2>這是b.html</h2>
-
</body>
四、測試
1.打開a.html
2.點擊“點我打開新窗口”按鈕
3.點擊彈出窗口右上角的“關閉”按鈕
這時我們看到控制台的“網絡”部分捕捉到了一個新的頁面請求,說明父頁面(a.html)被刷新了