当前位置：首页 > JavaScript

js实现弹窗关闭后刷新

2026-04-04 22:09:00JavaScript

使用`window.location.reload()`方法

在弹窗关闭时调用window.location.reload()可以强制刷新当前页面。适用于通过window.open()或showModalDialog()打开的弹窗。

// 打开弹窗
const popup = window.open('popup.html', '_blank');

// 监听弹窗关闭事件
const checkPopupClosed = setInterval(() => {
  if (popup.closed) {
    clearInterval(checkPopupClosed);
    window.location.reload();
  }
}, 500);

使用`postMessage`通信

通过postMessageAPI实现父子窗口间的通信，弹窗关闭前发送消息通知父页面刷新。

// 父页面代码
window.addEventListener('message', (event) => {
  if (event.data === 'refreshParent') {
    window.location.reload();
  }
});

// 弹窗页面代码
window.onbeforeunload = () => {
  window.opener.postMessage('refreshParent', '*');
};

模态对话框场景

使用dialog元素的close事件监听，适用于HTML5的<dialog>元素。

const dialog = document.querySelector('dialog');
dialog.addEventListener('close', () => {
  window.location.reload();
});

第三方弹窗库处理

对于使用如SweetAlert等库创建的弹窗，可在回调函数中触发刷新。

Swal.fire({
  title: '操作完成',
  icon: 'success'
}).then((result) => {
  if (result.isConfirmed) {
    window.location.reload();
  }
});

本地存储检测方案

通过localStorage或sessionStorage在弹窗关闭时设置标志位，主页面通过轮询检测。

js实现弹窗关闭后刷新

// 弹窗页面
window.onunload = () => {
  sessionStorage.setItem('shouldRefresh', 'true');
};

// 主页面
setInterval(() => {
  if (sessionStorage.getItem('shouldRefresh') === 'true') {
    sessionStorage.removeItem('shouldRefresh');
    window.location.reload();
  }
}, 1000);

标签: js