关闭弹出窗口后如何自动刷新带上传按钮的原页面？前端实现问询

你可以通过以下两种方式实现需求，优先推荐第一种，逻辑更简洁性能更好：

方案1：修改弹窗页面监听关闭事件（推荐） #

不需要修改主页面代码，仅需在弹窗页面新增关闭事件监听，触发原页面刷新即可，修改后的弹窗完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" multiple>
    <script>
        // 监听弹窗关闭/卸载事件
        window.addEventListener('beforeunload', function() {
            // 校验原页面存在且未关闭，避免控制台报错
            if (window.opener && !window.opener.closed) {
                // 触发原页面刷新
                window.opener.location.reload();
            }
        });
    </script>
</body>
</html>

该方案仅要求两个页面为同域场景，你当前本地同路径部署的情况完全符合使用条件，没有跨域限制问题。如果需要仅在上传完成后才刷新原页面，可以新增标记位判断，只有上传成功后才允许触发reload逻辑即可。

方案2：修改主页面监听弹窗状态（无需改弹窗代码） #

如果不想修改弹窗页面代码，可以在主页面打开弹窗时，存储弹窗实例，轮询判断弹窗关闭状态后触发刷新，修改后的主页面链接部分代码如下：

<a href="file:///C:/xampp/htdocs/final/pop.html" class="a-tag" 
target="popup" 
onclick="const popup = window.open('file:///C:/xampp/htdocs/final/pop.html','popup',`width=600,height=400,top=${window.outerHeight/2 - 250},left=${window.outerWidth/2 - 300}`); const checkCloseTimer = setInterval(() => { if(popup.closed) { clearInterval(checkCloseTimer); location.reload(); } }, 300); return false;">
Click to Upload Files
</a>

该方案通过每300ms轮询一次弹窗状态判断是否关闭，性能略低于方案1，胜在不需要修改弹窗侧代码。

内容的提问来源于stack exchange，提问作者noobmaster