如何检测Iframe内部内容是否超出Iframe本身的视口范围

同域场景解决方案（iframe与父页域名一致） #

你之前的方法失效核心原因是没有将iframe自身的内边距纳入计算逻辑，且没有区分iframe自身尺寸和内部可渲染区域的净尺寸差异，按以下步骤实现即可：

• 必须等待iframe加载完成后再执行尺寸计算，避免内容未完全渲染导致尺寸取值错误
• 计算iframe的可渲染区域净尺寸：用iframe的clientWidth/clientHeight减去自身上下左右的内边距，得到内部内容最多能显示的宽高
• 读取iframe内部文档的实际总尺寸：取内部document根节点的scrollWidth/scrollHeight，即内部内容的完整宽高
• 对比两个尺寸，只要内部总宽/高任意一项大于iframe可渲染区域的净宽/高，即可判定为内容超出视口

参考实现代码 #

const iframe = document.querySelector('iframe');
iframe.addEventListener('load', function() {
  // 获取iframe自身的计算样式
  const computedStyle = window.getComputedStyle(iframe);
  // 计算iframe可渲染内容的净宽高
  const visibleWidth = iframe.clientWidth 
    - parseFloat(computedStyle.paddingLeft) 
    - parseFloat(computedStyle.paddingRight);
  const visibleHeight = iframe.clientHeight 
    - parseFloat(computedStyle.paddingTop) 
    - parseFloat(computedStyle.paddingBottom);

  // 同域下读取iframe内部文档的实际总尺寸
  const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
  const innerTotalWidth = innerDoc.documentElement.scrollWidth;
  const innerTotalHeight = innerDoc.documentElement.scrollHeight;

  // 判定是否超出
  const isOverflow = innerTotalWidth > visibleWidth || innerTotalHeight > visibleHeight;
  if (isOverflow) {
    console.log('内容已超出Iframe视口');
    // 此处添加你的自定义业务逻辑
  }
});

跨域场景解决方案（iframe与父页域名不同） #

跨域下父页无法直接访问iframe内部DOM，需要两端配合实现：

• iframe内部页面加载完成后，计算自身document根节点的scrollWidth/scrollHeight，通过postMessage接口将尺寸数据传给父页
• 父页监听message事件接收内部尺寸数据，再按上述同域场景的方法计算自身可渲染区域净尺寸，对比后即可完成超出判定

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