如何通过CSS无延迟加载并正确定位iframe内嵌站点（AngularJS+IE11）

针对IE11下AngularJS+RequireJS初始化慢导致iframe加载延迟的问题，你可以通过提前加载iframe（放在Angular的ng-app外部），再用纯CSS将其视觉定位到Angular预留的容器中，完全不需要移动DOM（避免丢失iframe状态）。

实现步骤 #

1. 调整HTML结构

把iframe容器放在<body>最顶部（确保浏览器立即加载），Angular区域内只留一个占位容器：

<html>
<body>
  <!-- 提前加载，脱离Angular初始化流程 -->
  <div id="othersite">
    <iframe src="https://www.bing.com" frameborder="0">Other Site</iframe>
  </div>

  <div ng-app="module">
    <!-- Angular初始化后用来占位的容器，保持布局稳定 -->
    <div id="othersiteholder"></div>
  </div>
</body>
</html>

2. 纯CSS定位方案

核心思路是：

• 让占位容器#othersiteholder占据页面空间，避免布局跳动；
• 将iframe容器#othersite绝对定位，完全覆盖在占位容器上。

/* 占位容器：设置尺寸，成为布局参考 */
#othersiteholder {
  position: relative;
  /* 根据你的需求设置宽高，比如占满父容器或固定尺寸 */
  width: 100%;
  height: 600px;
  /* 可选：Angular加载前的占位背景 */
  background-color: #f5f5f5;
}

/* iframe容器：绝对定位到占位容器的位置 */
#othersite {
  position: absolute;
  /* 关键：和占位容器的位置、尺寸完全匹配 */
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
  /* 确保iframe容器层级高于其他元素（如果需要） */
  z-index: 1;
}

/* 让iframe占满容器 */
#othersite iframe {
  width: 100%;
  height: 100%;
  border: none;
}

动态场景的补充说明 #

如果#othersiteholder的位置或尺寸是Angular动态渲染的（比如依赖接口数据），纯CSS无法自动计算偏移量，但可以结合极少量的Angular代码来同步尺寸（不需要移动DOM）：

// 在Angular控制器中，同步占位容器的尺寸到iframe容器
angular.module('module').controller('YourController', function($scope, $element) {
  var holder = $element.find('#othersiteholder')[0];
  var iframeContainer = document.getElementById('othersite');
  
  // 监听占位容器的尺寸变化（可选，用MutationObserver或resize事件）
  function syncSize() {
    iframeContainer.style.width = holder.offsetWidth + 'px';
    iframeContainer.style.height = holder.offsetHeight + 'px';
    iframeContainer.style.top = holder.offsetTop + 'px';
    iframeContainer.style.left = holder.offsetLeft + 'px';
  }
  
  // 初始化同步
  syncSize();
});

这部分代码只是同步尺寸和位置，不会移动iframe的DOM节点，完全保留iframe的加载状态。

为什么这个方案有效？ #

• iframe放在ng-app外部，浏览器会优先加载它，不会等待AngularJS和RequireJS初始化完成；
• 纯CSS定位只是视觉上的重叠，iframe的DOM结构始终在ng-app外部，不会受到Angular初始化延迟的影响；
• 占位容器确保页面布局稳定，不会因为iframe提前加载导致布局跳动。

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