Outlook Web插件调用Office.context.ui.addHandlerAsync提示非函数如何解决？

核心原因 #

你遇到的报错本质是对话框页面获取的Office UI上下文不符合预期：addHandlerAsync 方法仅在对话框页面的子UI上下文下提供，你打印的OSF.DDA.UI.ParentUI结果说明当前页面拿到的是父页面的UI实例，自然不存在对应方法，常见触发原因如下：

• 对话框页面没有通过Office.context.ui.displayDialogAsync接口打开，而是直接在浏览器中访问了dialog.html地址，此时Office不会识别该页面为加载项的子对话框，不会注入子上下文对应的API
• 加载项引入的Office.js版本过低：DialogParentMessageReceived事件及对应的addHandlerAsync方法属于Dialog API 1.2及以上版本的接口，旧版Office.js未封装该方法
• 加载项manifest文件中未声明对应版本的要求集，导致Office默认按低版本API兼容模式运行，屏蔽了新接口
• 父页面与对话框页面引入的Office.js版本不一致，上下文通信出现兼容问题

小提示：你父页面代码中定义的路径变量是url，但displayDialogAsync传入的是url2，如果实际代码也存在这个写法需要修正变量名，你提到已经能正常打开对话框，应该是提问时的笔误。

解决方案 #

1. 先验证调试流程：不要直接打开dialog.html，必须通过父页面的displayDialogAsync触发打开对话框后再测试代码
2. 统一父页面和对话框页面的Office.js引入地址，使用官方最新CDN版本
3. 在加载项manifest的Requirements节点中添加Dialog API 1.2的版本声明，示例配置如下：

<Requirements>
  <Sets DefaultMinVersion="1.1">
    <Set Name="DialogApi" MinVersion="1.2" />
  </Sets>
</Requirements>

4. 如果是桌面版Outlook测试报错，先切换到Outlook网页版验证，排除客户端版本过低不支持高版本API的问题

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