Outlook Web插件调用displayNewMessageFormAsync被Safari/Firefox弹窗拦截求解决方案

问题现象 #

• 调用displayNewMessageFormAsync仅传入toRecipients参数时，Safari和未开启弹窗权限的Firefox会拦截新邮件窗口，Chrome可正常打开
• 若同时传入htmlBody参数，Firefox无需弹窗权限即可正常加载新邮件表单

可能原因 #

浏览器弹窗拦截机制核心判断逻辑是操作是否由用户主动交互触发、是否具备明确的上下文关联性。仅传入收件人时，Office JS的内部处理流程未被Safari/Firefox识别为合法用户触发操作；而添加htmlBody后，API调用的上下文被浏览器判定为合法交互，从而绕过拦截。

可行解决方案 #

方案1：绑定用户直接交互触发调用 #

确保displayNewMessageFormAsync的调用直接关联用户点击、按键等主动操作事件，避免放在异步回调或延迟执行逻辑中：

// 直接绑定到按钮点击事件
document.getElementById('create-new-mail').addEventListener('click', () => {
  const targetRecipient = 'user@example.com';
  Office.context.mailbox.displayNewMessageFormAsync(
    { toRecipients: [targetRecipient] },
    (result) => {
      if (result.status === Office.AsyncResultStatus.Failed) {
        console.error(result.error);
      }
    }
  );
});

浏览器通常不会拦截用户直接点击触发的弹窗，插件环境下同样适用。

方案2：添加最小化htmlBody兼容Firefox #

利用Firefox对带htmlBody参数的API调用的特殊处理逻辑，传入空白占位内容同时保留收件人参数，不影响邮件实际内容：

private addRecipientToNewMail(recipient: string): void {
  this.mailbox.displayNewMessageFormAsync(
    { 
      toRecipients: [recipient],
      htmlBody: ' ' // 空白字符占位，无视觉影响
    },
    (result: Office.AsyncResult<void>) => {
      if (result.status === Office.AsyncResultStatus.Failed) {
        console.log(result.error);
      }
    }
  );
}

方案3：Safari专属窗口预创建处理 #

Safari拦截机制更严格，可先通过用户交互打开空白窗口，再将新邮件表单加载到该窗口：

private addRecipientToNewMail(recipient: string): void {
  // 必须在用户点击事件内执行此代码
  const preOpenedWindow = window.open('', '_blank');
  if (preOpenedWindow) {
    this.mailbox.displayNewMessageFormAsync(
      { 
        toRecipients: [recipient],
        window: preOpenedWindow // 指定已打开的窗口
      },
      (result: Office.AsyncResult<void>) => {
        if (result.status === Office.AsyncResultStatus.Failed) {
          console.log(result.error);
          preOpenedWindow.close(); // 失败时关闭空白窗口
        }
      }
    );
  }
}

验证效果 #

• Chrome：三种方案均正常运行
• Firefox：方案1、2可直接绕过弹窗拦截
• Safari：方案3可有效避免拦截，方案1需结合具体版本测试

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