Office.js对话框尺寸超出displayDialogAsync设置值的问题解决

我在Office加载项中使用Office.js显示对话框，调用displayDialogAsync函数的代码如下：

Office.context.ui.displayDialogAsync(`https://localhost:3000/notification.htmlmessage=${message}&icon=${icon}`,{ height: 10, width: 10, displayInIframe: true },function (asyncResult) {
dialog = asyncResult.value;
dialog.addEventHandler(Office.EventType.DialogMessageReceived, processDialogAlertMessage);});

但实际弹出的对话框占用空间超出了设置的参数，尽管将height和width都设为10，它却占据父窗口高度20%、宽度50%。

请问为何对话框会超出设置空间，如何修复使其按预期尺寸显示？

原因分析 #

1. 参数单位与最小限制冲突：当displayInIframe: true时，height和width参数的单位是父窗口的百分比，而非固定像素。同时Office对内嵌iframe对话框有强制最小尺寸要求（通常最小宽度≥300px、最小高度≥200px）。如果你设置的10%换算后像素值低于这个最小值，Office会自动将尺寸调整到满足最小限制的百分比（比如父窗口宽600px时，300px对应50%宽度；父窗口高1000px时，200px对应20%高度），这就是你看到的异常尺寸。
2. URL格式错误：你的目标URL存在语法问题，notification.htmlmessage=${message}缺少了参数分隔符?，正确写法应为notification.html?message=${message}&icon=${icon}。虽然这不一定直接影响尺寸，但可能导致页面加载异常，间接引发布局问题。

修复方案 #

方案1：调整百分比以满足最小尺寸要求 #

如果必须使用内嵌iframe对话框（displayInIframe: true），计算父窗口尺寸对应的最小百分比，确保设置的height和width换算后像素不低于Office的最小限制。例如：

• 若父窗口宽度为1000px，设置width: 30（对应300px，刚好达最小宽度）；
• 若父窗口高度为800px，设置height: 25（对应200px，刚好达最小高度）。

修改后的代码示例：

Office.context.ui.displayDialogAsync(`https://localhost:3000/notification.html?message=${message}&icon=${icon}`,{ height: 25, width: 30, displayInIframe: true },function (asyncResult) {
  dialog = asyncResult.value;
  dialog.addEventHandler(Office.EventType.DialogMessageReceived, processDialogAlertMessage);
});

方案2：禁用iframe模式，使用固定像素尺寸 #

若需要更小的精确尺寸，将displayInIframe设为false（默认值），此时height和width参数为固定像素值，可直接设置符合需求的尺寸（需满足Office的像素范围：宽100-1366px，高100-768px）。

修改后的代码示例：

Office.context.ui.displayDialogAsync(`https://localhost:3000/notification.html?message=${message}&icon=${icon}`,{ height: 200, width: 300, displayInIframe: false },function (asyncResult) {
  dialog = asyncResult.value;
  dialog.addEventHandler(Office.EventType.DialogMessageReceived, processDialogAlertMessage);
});

方案3：优化对话框页面的布局 #

确保notification.html页面的内容没有强制的最小宽高样式，避免页面内容撑大对话框。可在页面CSS中设置：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

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