如何利用jQuery/Bootstrap实现iframe高度变化时容器div自适应调整？

嘿，这个需求我之前帮不少开发者解决过，其实用jQuery就能轻松实现，不过得先划重点：跨域限制——如果你的iframe和父页面不在同一个域名（包括子域名、协议、端口不一样），浏览器的同源策略会阻止你直接获取iframe内部的高度，这时候得用postMessage来跨域通信。下面分两种场景给你具体方案：

首先给你的容器和iframe加个ID方便选择，结构改成这样：

<div id="iframe-container">
  <iframe id="target-iframe" src="same-domain-page.html" frameborder="0" style="width:100%;"></iframe>
</div>

然后用jQuery配合MutationObserver（比定时器更高效）来监听iframe内的内容变化，同步容器高度：

$(document).ready(function() {
  const $container = $('#iframe-container');
  const $iframe = $('#target-iframe');

  // 核心：设置iframe和容器高度的函数
  function syncHeight() {
    const iframeDoc = $iframe[0].contentDocument || $iframe[0].contentWindow.document;
    const contentHeight = iframeDoc.body.scrollHeight;
    $iframe.height(contentHeight);
    $container.height(contentHeight); // 同步外层容器高度
  }

  // 初始加载完成后同步一次
  $iframe.on('load', syncHeight);

  // 监听iframe内的DOM变化，动态同步高度（比定时器更优雅）
  const iframeWindow = $iframe[0].contentWindow;
  const domObserver = new MutationObserver(syncHeight);
  domObserver.observe(iframeWindow.document.body, {
    attributes: true,
    childList: true,
    subtree: true // 监听所有子元素的变化
  });
});

补充说明 #

• 如果不想用MutationObserver，也可以用定时器（比如setInterval(syncHeight, 1000)），但频繁触发会影响性能，优先选前者。
• 可以给容器加个最小高度（比如#iframe-container { min-height: 300px; }），防止内容为空时容器塌陷。

由于浏览器的同源策略，跨域时你没法直接访问iframe内部的DOM，这时候得用postMessage在父子页面间传递高度信息：

父页面（包含iframe的页面）代码 #

$(document).ready(function() {
  const $container = $('#iframe-container');
  const $iframe = $('#target-iframe');

  // 监听来自iframe的高度更新消息
  window.addEventListener('message', function(e) {
    // 一定要验证消息来源，防止恶意请求
    if (e.origin !== 'https://your-iframe-domain.com') return;
    
    if (e.data.type === 'updateHeight') {
      const newHeight = e.data.height;
      $iframe.height(newHeight);
      $container.height(newHeight);
    }
  });

  // iframe加载完成后，主动请求一次高度
  $iframe.on('load', function() {
    $iframe[0].contentWindow.postMessage(
      { type: 'requestHeight' },
      'https://your-iframe-domain.com' // 指定iframe的域名，别用'*'，不安全
    );
  });
});

iframe内部页面（你需要有权修改这个页面的代码）代码 #

// 向父页面发送当前高度的函数
function sendHeightToParent() {
  const currentHeight = document.body.scrollHeight;
  window.parent.postMessage(
    { type: 'updateHeight', height: currentHeight },
    'https://your-parent-domain.com' // 指定父页面的域名
  );
}

// 初始加载时发送一次高度
window.addEventListener('load', sendHeightToParent);

// 监听父页面的高度请求
window.addEventListener('message', function(e) {
  if (e.origin !== 'https://your-parent-domain.com') return;
  if (e.data.type === 'requestHeight') {
    sendHeightToParent();
  }
});

// 监听内部DOM变化，动态发送高度
const domObserver = new MutationObserver(sendHeightToParent);
domObserver.observe(document.body, {
  attributes: true,
  childList: true,
  subtree: true
});

Bootstrap本身没有专门的组件或工具类来处理iframe的动态高度自适应，因为这属于DOM交互的动态逻辑，还是得靠JavaScript来实现上面的方案。你可以结合Bootstrap的布局类（比如container、row）来调整容器的样式，但核心的高度同步逻辑还是得用jQuery或原生JS来写。

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