Outlook插件调用messageChild无法向对话框传参且报存储拦截错误怎么解决

问题原因 #

• 1 未正确获取dialog实例：父代码中仅声明了dialog变量，但没有在displayDialogAsync的成功回调中将asyncResult.value赋值给dialog，调用messageChild的对象实际是未初始化的变量，即使暂时无报错也存在逻辑错误。
• 2 消息发送时机错误：displayDialogAsync的回调触发仅代表对话框窗口创建完成，此时子页面的Office.js还未加载完成、DialogParentMessageReceived事件监听器也未注册，提前发送的消息无法被捕获。
• 3 跟踪防护限制报错：Outlook桌面端使用的Edge WebView2默认开启跟踪预防功能，限制了第三方域appsforoffice.microsoft.com下office.js的存储访问权限，会影响Office API的正常执行。
• 4 不安全的targetOrigin配置：使用*作为目标源会触发额外的跨域安全校验，可能导致消息被拦截。

解决方法 #

步骤1：修正父页面逻辑 #

修改父页面代码，先正确获取dialog实例，等待子页面发送就绪信号后再传递消息：

var url2 = window.location.origin + '/dialogbox.html'
var dialog
Office.context.ui.displayDialogAsync(url2, {height: 50, width: 50},
    function (asyncResult) {
        if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
            // 先获取dialog实例
            dialog = asyncResult.value;
            // 监听子页面发来的消息
            dialog.addHandlerAsync(Office.EventType.DialogMessageReceived, function(arg) {
                // 收到子页面就绪信号后再发送业务消息
                if (arg.message === 'childReady') {
                    dialog.messageChild('hello from the parent', {
                        // 替换*为实际域名，本地调试用当前源即可
                        targetOrigin: window.location.origin
                    });
                }
            });
        }
    }
);

步骤2：修正子页面逻辑 #

子页面在事件监听器注册完成后，先向父页面发送就绪信号：

Office.onReady().then(function() {
    Office.context.ui.addHandlerAsync(
        Office.EventType.DialogParentMessageReceived,
        onMessageFromParent,
        function() {
            // 监听器注册成功，通知父页面可以发消息
            Office.context.ui.messageParent('childReady');
        }
    );
});
        
function onMessageFromParent(arg){
    console.log(arg.message);
}

步骤3：解决跟踪防护报错 #

• 本地调试时，打开Edge浏览器设置 → 隐私、搜索和服务 → 跟踪预防 → 例外，添加localhost和appsforoffice.microsoft.com到例外列表。
• 确保本地调试使用HTTPS协议，WebView2对HTTP站点的安全限制更多，容易触发权限拦截。
• 生产环境部署时，将你的插件域名添加到Office 365租户的信任站点列表中。

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