window.open跳转后页面空白，调整窗口才显示内容的问题求助

当使用window.open()打开一个会重定向到我方站点的链接时，页面仅显示body背景色，内容已加载但不可见，直到调整窗口大小后才会显示。

有问题的代码示例：

<button>Click</button>

document.querySelector('button').addEventListener('click', function() {
  window.open('https://dashboard.palatial.cloud/project/663cdb4789db9b22c12cff23/share', '_blank');
});

使用<a>标签的代码可正常运行：

document.querySelector('button').addEventListener('click', function() {
  const a = document.createElement('a');
  a.href = 'https://dashboard.palatial.cloud/project/663cdb4789db9b22c12cff23/share';
  a.target = '_blank';
  a.click();
});

请问这两种实现方式的差异是什么？由于无法修改用户跳转至我方站点的方式，我方站点该如何修复此问题？

• 浏览器信任与交互优先级
  window.open()属于直接调用浏览器API创建新窗口，若浏览器判定该操作并非用户直接触发的高优先级交互（比如嵌套在异步逻辑中），可能会限制新窗口的渲染资源分配，甚至跳过部分布局计算步骤。而通过<a>标签模拟点击，本质是复刻用户主动点击链接的行为，浏览器会将其归为正常导航流程，给予完整的渲染权限。
• 窗口初始化逻辑
  window.open()创建的新窗口，其上下文初始化由API参数和浏览器默认规则主导，在重定向过程中，可能出现窗口尺寸、布局上下文未同步的问题，导致渲染引擎未触发完整的页面绘制。<a>标签触发的跳转则遵循标准导航流程，浏览器会自动同步窗口初始化状态，重定向后能正常执行页面渲染生命周期。

1. 强制触发页面重排/重绘 #

在页面加载完成后，手动触发布局更新，让浏览器重新计算并渲染内容：

window.addEventListener('DOMContentLoaded', () => {
  // 临时修改样式触发重排
  document.body.style.display = 'none';
  void document.body.offsetHeight; // 读取属性强制浏览器计算布局
  document.body.style.display = '';
});

2. 主动模拟窗口resize事件 #

通过派发resize事件，触发浏览器的渲染逻辑：

window.addEventListener('load', () => {
  const resizeEvent = new Event('resize');
  window.dispatchEvent(resizeEvent);
});

3. 排查布局依赖问题 #

检查页面是否存在依赖窗口尺寸的布局逻辑：

• 若使用window.innerWidth/innerHeight计算元素尺寸，确保初始化时能正确获取有效值
• 避免关键容器依赖自动布局，明确设置宽高或使用弹性布局确保尺寸计算稳定

4. 利用requestAnimationFrame确保渲染时机 #

将布局初始化逻辑放在浏览器下一渲染周期执行：

window.addEventListener('DOMContentLoaded', () => {
  requestAnimationFrame(() => {
    // 执行你的布局更新逻辑，比如动态计算容器尺寸、初始化可视化组件等
    updatePageLayout();
  });
});

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