Outlook外接程序Dialog API问题：按下Esc键后已弹出对话框仍可见无法关闭

可行解决方案 #

方案1：全局监听Esc按键，主动清理残留对话框 #

在主外接程序页面和Dialog.html页面都添加全局Esc按键监听，只要触发Esc就主动关闭已打开的对话框实例，避免焦点在外时Dialog事件不触发的问题。
主页面代码补充：

// 全局存储dialog实例
let activeDialog = null;

function openDialogAsIframe() {
    Office.context.ui.displayDialogAsync(window.location.origin + "/Dialog.html",
        { height: 16, width: 14, displayInIframe: true }, (asyncResult) => {
            activeDialog = asyncResult.value;
            // 原有事件绑定逻辑不变
            activeDialog.addEventHandler(Office.EventType.DialogMessageReceived, (arg) => {
                console.log(arg.message);
                activeDialog.close();
                activeDialog = null;
            });
            activeDialog.addEventHandler(Office.EventType.DialogEventReceived, (arg) => {
                console.log(arg.error);
                activeDialog.close();
                activeDialog = null;
            });
        });
}

// 全局监听Esc按键
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && activeDialog) {
        try {
            activeDialog.close();
            activeDialog = null;
        } catch(err) {
            console.log('清理残留对话框失败', err);
        }
    }
});

同时在Dialog.html页面也添加相同的Esc监听，收到Esc事件后调用Office.context.ui.messageParent通知主页面关闭对话框。

方案2：添加焦点锁定，禁止焦点移出对话框 #

打开对话框后强制将焦点锁定在对话框内部，避免点击外部区域导致焦点丢失：

// 打开对话框后主动聚焦
activeDialog.focus();
// 监听全局点击事件，如果点击位置不在对话框内，强制将焦点拉回对话框
document.addEventListener('click', (e) => {
    if (activeDialog && !e.target.closest('.office-dialog')) { // 匹配Dialog渲染后的DOM类名
        activeDialog.focus();
    }
});

也可以引入成熟的焦点捕获逻辑，确保焦点始终在对话框内部，从根源避免触发异常场景。

方案3：调整Dialog打开参数 #

如果业务场景允许不使用iframe模式，可以将displayInIframe参数改为false，使用独立弹窗模式，该模式下焦点管理逻辑更稳定，不会出现点击外部区域导致的事件丢失问题。

内容的提问来源于stack exchange，提问作者Péter Csonka