JavaScript获取带外部src的IFrame的scrollHeight无返回值问题排查

DevOps 小满

2026-10-5

问题产生原因

该现象由浏览器同源策略的安全限制导致，同源策略要求两个页面的协议、域名、端口三者完全一致，才允许互相访问DOM、读取内部属性数据，目的是避免恶意跨域站点窃取用户数据。
当iframe的src属性为空时，iframe的源和父页面完全一致，因此父页面可以正常读取iframe的contentWindow.document对象，拿到scrollHeight数值。
当iframe加载第三方域的页面（比如示例中的wikipedia.org）时，父页面和iframe的源不一致，属于跨域场景，浏览器会直接拦截父页面对iframe内部DOM的访问请求，执行document.getElementById("frm").contentWindow.document时会抛出跨域错误，你可以打开浏览器F12控制台看到对应的报错信息，因此按钮点击后没有内容更新。

可行解决方法

若iframe加载的是你自己可控的同域页面，只需要保证父页面和iframe页面的协议、域名、端口完全一致，即可正常读取高度属性。

若iframe加载的是你可控的跨域页面，可通过postMessage机制实现跨域通信，由iframe内部计算高度后发送给父页面：
父页面添加监听逻辑：

window.addEventListener('message', (event) => {
  // 可添加对event.origin的校验，只接收信任站点的消息
  if (event.data?.type === 'iframeScrollHeight') {
    document.getElementById('val').innerText = `scrollHeight is: ${event.data.value}`;
  }
});

iframe内部页面添加发送逻辑：

window.onload = () => {
  // 生产环境请将第二个参数替换为父页面的实际域名，提升安全性
  window.parent.postMessage({
    type: 'iframeScrollHeight',
    value: document.documentElement.scrollHeight
  }, '*');
};