如何让iframe内的加载器（loader）相对于父窗口定位？

方案1：将加载器移至父页面（推荐） #

iframe内的position: fixed是相对于自身视口生效的，最稳妥的处理方式是把加载器放在父页面中，通过父子页面通信控制它的显示状态：

1. 父页面配置加载器
   在父页面添加加载器元素，CSS设置为基于父窗口的固定定位：

   .parentLoader {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: none; /* 默认隐藏 */
     z-index: 9999; /* 确保层级在最上层 */
   }
   

2. iframe内触发通信
   当iframe内执行特定操作需要显示/隐藏加载器时，向父窗口发送消息：

   // 显示加载器
   window.parent.postMessage({ action: 'showLoader' }, '*');
   // 操作完成后隐藏加载器
   window.parent.postMessage({ action: 'hideLoader' }, '*');
   

3. 父页面监听消息并控制加载器
   父页面监听message事件，根据收到的指令切换加载器状态：

   window.addEventListener('message', (event) => {
     // 建议添加origin校验，只处理信任域名的消息，提升安全性
     const loader = document.querySelector('.parentLoader');
     if (event.data.action === 'showLoader') {
       loader.style.display = 'block';
     } else if (event.data.action === 'hideLoader') {
       loader.style.display = 'none';
     }
   });
   

方案2：iframe内动态计算偏移量（不推荐，维护成本高） #

如果必须将加载器留在iframe内，需要计算iframe在父窗口中的位置偏移，动态调整加载器的定位：

1. 父页面获取iframe位置并传递给iframe

   const iframe = document.querySelector('iframe');
   const rect = iframe.getBoundingClientRect();
   iframe.contentWindow.postMessage({
     iframeTop: rect.top,
     iframeLeft: rect.left,
     parentScrollTop: window.scrollY
   }, '*');
   

2. iframe内调整加载器样式
   监听父页面传来的位置数据，修改加载器的定位（改用absolute基于iframe文档根元素）：

   window.addEventListener('message', (event) => {
     const loader = document.querySelector('.loaderIcon');
     // 计算基于父窗口的居中位置
     const top = window.parent.innerHeight / 2 - event.data.iframeTop + event.data.parentScrollTop;
     const left = window.parent.innerWidth / 2 - event.data.iframeLeft;
     loader.style.position = 'absolute';
     loader.style.top = `${top}px`;
     loader.style.left = `${left}px`;
   });
   

   注意：这种方法需要额外监听父窗口的滚动、窗口大小变化事件，重新计算偏移量，容易出现兼容性问题，维护成本较高。

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