如何用JavaScript获取iframe视口中的可见HTML内容？

前提说明 #

只有同源iframe（即iframe内容与父页面的域名、协议、端口完全一致）才能直接通过JavaScript操作，跨域场景下受浏览器同源策略限制，无法直接访问iframe内部文档。

实现步骤 #

1. 获取iframe及内部文档对象
   先定位目标iframe元素，再获取其内部的文档对象：

const iframe = document.getElementById('target-iframe');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

2. 获取iframe视口关键参数
   拿到iframe的滚动位置和视口可见高度：

// iframe内部的滚动距离（相对于文档顶部）
const scrollTop = iframe.contentWindow.scrollY || iframeDoc.documentElement.scrollTop;
// iframe视口的可见高度
const viewportHeight = iframe.contentWindow.innerHeight;

3. 筛选视口中的可见元素
   遍历iframe内的所有元素，通过getBoundingClientRect()判断元素是否处于视口范围内（元素部分或完全可见均计入）：

const visibleElements = [];
const allElements = iframeDoc.body.querySelectorAll('*');

allElements.forEach(el => {
  const rect = el.getBoundingClientRect();
  // 判断逻辑：元素底部在视口上方之上，且元素顶部在视口下方之下
  if (rect.bottom > 0 && rect.top < viewportHeight) {
    visibleElements.push(el.cloneNode(true));
  }
});

4. 提取可见内容的HTML
   创建临时容器存放筛选出的可见元素，再提取其HTML内容：

const tempContainer = iframeDoc.createElement('div');
visibleElements.forEach(el => tempContainer.appendChild(el));
const visibleHTML = tempContainer.innerHTML;

// 输出或使用可见内容
console.log(visibleHTML);

补充说明 #

• 若需精确筛选完全可见的元素，可将判断条件改为：rect.top >= 0 && rect.bottom <= viewportHeight
• 若iframe内容为动态加载，需在内容加载完成后执行上述代码（可监听iframe的load事件）

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