当前位置：首页 > JavaScript

js实现弹窗关闭后刷新

2026-03-01 21:20:10JavaScript

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

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

js实现弹窗关闭后刷新

// 示例：通过 window.open 打开弹窗并在关闭后刷新
const popup = window.open('popup.html');
popup.onbeforeunload = function() {
  window.location.reload();
};

监听弹窗的关闭事件

对于动态生成的弹窗（如通过 DOM 操作创建的 <div> 弹窗），可以通过监听关闭按钮的点击事件触发刷新。

js实现弹窗关闭后刷新

// 示例：监听自定义弹窗的关闭按钮
document.getElementById('closePopup').addEventListener('click', function() {
  document.getElementById('popup').style.display = 'none';
  window.location.reload();
});

使用 `window.addEventListener('unload')`

适用于子页面（如 iframe 或新窗口）关闭时通知父页面刷新。需在子页面中调用父页面的方法。

// 子页面中代码
window.addEventListener('unload', function() {
  window.opener.postMessage('refresh', '*');
});

// 父页面中监听消息
window.addEventListener('message', function(event) {
  if (event.data === 'refresh') {
    window.location.reload();
  }
});

结合 `localStorage` 或 `sessionStorage`

通过存储状态标记实现跨页面通信，适合需要条件刷新的场景。

// 弹窗关闭时设置标记
localStorage.setItem('shouldRefresh', 'true');

// 主页面监听存储事件
window.addEventListener('storage', function(event) {
  if (event.key === 'shouldRefresh' && event.newValue === 'true') {
    window.location.reload();
    localStorage.removeItem('shouldRefresh');
  }
});