旧日历弹窗适配需求：实现自动调尺寸或先关后开功能

方案1：自动适配内容高度，已打开窗口自动调整尺寸 #

这个方案无需手动指定height，弹窗会根据加载的页面内容自动调整高度，就算窗口已经打开，切换页面后也会重新适配内容尺寸。

实现代码 #

// 全局保存弹窗实例，方便后续操作
let popupWindow = null;

function newPopup(url) {
    // 统一窗口配置（移除height参数，保留你需要的其他设置）
    const windowConfig = 'width=600, left=90, top=90, resizable=yes, menubar=no, scrollbars=no, toolbar=no, location=no, directories=no, status=no';
    
    if (popupWindow && !popupWindow.closed) {
        // 窗口已打开，直接更新页面URL
        popupWindow.location.href = url;
        // 监听新页面加载完成，调整窗口尺寸
        popupWindow.onload = function() {
            // 获取页面内容实际高度
            const contentHeight = popupWindow.document.body.scrollHeight;
            // 调整窗口高度（加20是预留窗口边框高度，可按需微调）
            popupWindow.resizeTo(600, contentHeight + 20);
        };
    } else {
        // 窗口未打开，创建新弹窗
        popupWindow = window.open(url, 'MyWindow', windowConfig);
        // 加载完成后自动适配高度
        popupWindow.onload = function() {
            const contentHeight = popupWindow.document.body.scrollHeight;
            popupWindow.resizeTo(600, contentHeight + 20);
        };
    }
}

说明 #

• 移除了手动设置的height参数，改用页面内容的scrollHeight自动计算高度
• 全局变量popupWindow保存弹窗实例，避免重复创建窗口
• 页面加载完成后再调整尺寸，确保内容已完全渲染

方案2：打开新弹窗前关闭已存在的窗口 #

这个方案逻辑简单直接，每次点击链接时先关闭已打开的MyWindow，再重新创建符合新页面尺寸的窗口。

实现代码 #

let popupWindow = null;

function newPopup(url, windowConfig) {
    // 检查窗口是否存在且未关闭
    if (popupWindow && !popupWindow.closed) {
        popupWindow.close();
    }
    // 创建新窗口
    popupWindow = window.open(url, 'MyWindow', windowConfig);
}

你之前的代码无效原因 #

window.close('MyWindow')是错误用法，window.close()不能通过名称关闭窗口，只能对window.open()创建的窗口实例调用close()方法，才能关闭指定窗口。

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