Office.context.ui.displayDialogAsync在网页版Office中无法正常显示问题

桌面端正常运行代码 #

以下代码在MacOS版Word 365桌面客户端中可正常显示并按预期工作：

let dialog; 

function openDialog(url, successUrl) {
  Office.onReady((info) => {
    if (info.host === Office.HostType.Word) {
      console.log(info);
      Office.context.ui.displayDialogAsync(
        url,
        { height: 50, width: 30, displayInIframe: false }, // size of the dialog box
        (res) => {
          console.log(JSON.stringify(res));
          if (res.status === Office.AsyncResultStatus.Succeeded) {
            console.log("Display dialog separate window");
            dialog = res.value; // set the dialog variable declared earlier
            dialog.addEventHandler(
              Office.EventType.DialogMessageReceived,
              (arg) => {
                dialog.close();
                const { message } = arg; // we want the string "true"
                if (message === "true") {
                  window.location.replace(successUrl);
                }
              }
            );
          }
        }
      );
    }
  });
}

网页端异常现象 #

在Chrome和Edge浏览器的网页版Office中（旁加载相同manifest.xml），出现以下异常：

• 本应显示在主窗口的弹窗拦截提示，实际出现在任务窗格内
• 点击“允许”后，对话框短暂弹出随即消失

控制台输出日志如下：

{"value":{},"status":"succeeded"} 
Display dialog separate window

问题定位 #

经排查，异常原因是对话框URL中包含的<script>link-to-office-js</script>标签，该问题已在GitHub提交对应Issue。

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