jQuery：根据内容动态设置iframe高度

首先得明确：旧代码失效的核心原因并不是 jQuery 版本本身的 load 方法废弃（其实 jQuery 3.x 依然支持 $(elem).load(fn)，但更推荐用标准的事件绑定语法），而是同源策略限制（这个是硬要求，跨域情况下任何版本都没法直接获取 iframe 内容高度），以及获取内容高度的方式在现代浏览器里需要更严谨的兼容处理。

下面针对同域场景给出几种可行的解决思路：

1. 基础版：监听 iframe 加载完成，动态设置高度 #

改用 jQuery 3.x 推荐的 on('load') 事件绑定方式，同时优化内容高度的获取逻辑，兼容不同浏览器的文档对象模型：

// 确保在 iframe 元素存在后执行这段代码
$("#IframeId").on('load', function() {
  // 获取 iframe 的文档对象（兼容不同浏览器）
  const iframeDoc = this.contentDocument || this.contentWindow.document;
  // 取文档根节点或 body 的滚动高度（scrollHeight 能获取到整个内容的实际高度）
  const contentHeight = iframeDoc.documentElement.scrollHeight || iframeDoc.body.scrollHeight;
  // 设置 iframe 高度
  $(this).height(contentHeight);
});

注意点： #

• 必须保证 iframe 的 src 和父页面是同域（协议、域名、端口一致），否则浏览器会阻止访问 iframe 内部文档，导致无法获取高度。
• 如果 iframe 是动态创建的，要在设置 src 之前绑定 load 事件，避免错过加载完成的时机。

2. 进阶版：处理 iframe 内动态加载的内容 #

如果 iframe 里的内容是通过 AJAX、前端渲染（比如 Vue/React）动态生成的，仅监听一次 load 事件就不够了——因为 load 只在 iframe 初始加载完成时触发，后续内容变化不会再次触发。这时候可以用**跨页面消息通信（postMessage）**来实现：

步骤1：在 iframe 内部添加脚本，发送高度更新消息 #

// iframe 页面的脚本
function updateParentIframeHeight() {
  // 获取当前页面的实际高度
  const currentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  // 向父页面发送消息（第二个参数填父页面域名更安全，比如 'https://your-domain.com'）
  window.parent.postMessage(
    { type: 'updateIframeHeight', height: currentHeight },
    '*'
  );
}

// 初始加载完成后发送一次高度
window.addEventListener('load', updateParentIframeHeight);

// 监听页面内容变化（比如 DOM 结构更改、图片加载完成），实时更新高度
const observer = new MutationObserver(updateParentIframeHeight);
observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true
});

步骤2：在父页面监听消息，更新 iframe 高度 #

// 父页面的脚本
window.addEventListener('message', function(event) {
  // 验证消息来源（同域情况下可以检查 event.origin，避免恶意消息）
  if (event.origin !== window.location.origin) return;
  
  // 判断消息类型，更新高度
  if (event.data.type === 'updateIframeHeight') {
    $("#IframeId").height(event.data.height);
  }
});

3. 跨域场景的折中方案 #

如果 iframe 和父页面是跨域的，浏览器的同源策略会完全阻止你直接获取 iframe 内容或接收未授权的消息。这种情况下只能和 iframe 页面的开发者配合：

• 让 iframe 页面在内容加载完成后，通过 URL 参数或自定义协议传递高度信息。
• 使用基于双方配合的消息机制实现自适应。

内容的提问来源于stack exchange，提问作者Karel Sniper Žák