开发Outlook Web扩展：能否实现无地址栏的对话框？

可以实现无地址栏的对话框，核心是通过Office.js的DisplayDialogAsync方法并配置特定参数来隐藏地址栏，以下是具体实现步骤：

1. 配置扩展Manifest文件 #

首先需要在扩展的manifest中声明对话框权限，并指定扩展的源地址（确保对话框页面与扩展同域）：

{
  "manifestVersion": "1.1",
  "version": "1.0.0",
  "Permissions": [
    "Mailbox",
    "Dialog"
  ],
  "WebApplicationInfo": {
    "Id": "你的应用注册ID",
    "Resource": "https://your-extension-domain.com",
    "ApplicationPermissions": []
  },
  // 其他manifest配置项...
}

2. 调用Office.js打开无地址栏对话框 #

使用displayDialogAsync方法时，通过showNavigationBar: false参数隐藏地址栏，同时设置displayInIframe: true确保参数生效：

Office.context.ui.displayDialogAsync(
  'https://your-extension-domain.com/folder-picker.html', // 你的自定义对话框页面
  {
    height: 55, // 对话框高度（百分比）
    width: 45,  // 对话框宽度（百分比）
    showNavigationBar: false, // 关键：隐藏地址栏
    displayInIframe: true
  },
  function (asyncResult) {
    if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
      const dialog = asyncResult.value;
      // 监听对话框的消息和关闭事件
      dialog.addEventHandler(Office.EventType.DialogEventReceived, function (args) {
        if (args.error) {
          console.error('对话框异常:', args.error.message);
        } else if (args.message) {
          // 处理对话框返回的选中文件夹数据
          const selectedFolder = JSON.parse(args.message);
          console.log('选中文件夹:', selectedFolder);
        }
      });
    } else {
      console.error('打开对话框失败:', asyncResult.error.message);
    }
  }
);

3. 开发对话框页面（文件夹选择UI） #

对话框页面是你自定义的HTML页面，需嵌入Office.js以调用Outlook API获取文件夹列表，实现选择逻辑：

<!DOCTYPE html>
<html>
<head>
  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
</head>
<body>
  <div id="folder-list"></div>
  <script>
    Office.initialize = function () {
      // 获取用户邮箱文件夹列表
      Office.context.mailbox.getFoldersAsync(function (asyncResult) {
        if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
          renderFolderList(asyncResult.value);
        } else {
          console.error('获取文件夹失败:', asyncResult.error.message);
        }
      });
    };

    // 渲染文件夹选择列表
    function renderFolderList(folders) {
      const listContainer = document.getElementById('folder-list');
      folders.forEach(folder => {
        const folderItem = document.createElement('div');
        folderItem.style.padding = '8px';
        folderItem.style.cursor = 'pointer';
        folderItem.textContent = folder.displayName;
        folderItem.addEventListener('click', function () {
          // 选中后向主页面返回数据并关闭对话框
          Office.context.ui.messageParent(JSON.stringify({
            folderId: folder.id,
            folderName: folder.displayName
          }));
        });
        listContainer.appendChild(folderItem);
      });
    }
  </script>
</body>
</html>

关键注意事项 #

• 对话框页面必须与扩展的WebApplicationInfo.Resource地址同域，否则会触发跨域限制。
• 测试时必须使用HTTPS协议，Outlook Web不允许加载HTTP的扩展资源。
• showNavigationBar参数仅在displayInIframe设为true时生效，二者需配合使用。

内容的提问来源于stack exchange，提问作者me.at.coding