跨域场景下嵌入第三方页面的iframe能否从内部检测自身是否处于视口内？

嘿，这个场景确实有点棘手——因为同源策略的限制，跨域iframe根本碰不到宿主页面的任何视口或DOM信息，所以想直接精准判断自己是不是在宿主视口里面，确实没什么完美的纯iframe内部方案。不过咱们可以用几个间接的方法来近似实现需求：

1. 靠浏览器对非可见iframe的性能节流来推测 #

大多数现代浏览器都会对完全移出视口的iframe“降权”——比如暂停requestAnimationFrame的回调，或者把setTimeout的执行间隔拉得很长。咱们可以利用这个特性来间接判断：

let lastFrameTimestamp = Date.now();
let isLikelyVisible = true;

function checkIfVisible() {
  const now = Date.now();
  // 正常60fps的回调间隔大概是16ms，如果间隔远超这个值，大概率被节流了
  if (now - lastFrameTimestamp > 100) {
    isLikelyVisible = false;
    // 这里执行iframe不可见时的操作
  } else {
    isLikelyVisible = true;
    // 这里执行iframe可见时的操作
  }
  lastFrameTimestamp = now;
  requestAnimationFrame(checkIfVisible);
}

// 启动监测循环
requestAnimationFrame(checkIfVisible);

不过得注意：这个方法不是100%准确——如果宿主页面本身性能很差（比如大量JS执行导致卡顿），也会触发误判；而且如果iframe只是部分露出，浏览器可能不会节流，所以没法区分“部分可见”和“完全可见”。

2. 用Page Visibility API判断标签页级的可见性 #

如果你的需求没那么细，只是想知道用户是不是切到别的标签页了（而不是当前标签页里把iframe滚走了），那Page Visibility API就够用：

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 标签页被切走了，iframe肯定不在用户视线里
    handleInvisible();
  } else {
    // 标签页是激活状态，但iframe可能还在视口外
    handlePotentiallyVisible();
  }
});

这个方法的局限性很明显：只能判断标签页是否激活，没法知道iframe在当前标签页里的具体位置。

3. （最优解，但需要宿主协作）用postMessage传递状态 #

虽然你说没法控制宿主页面，但如果能说服宿主那边的开发者加几行简单的代码，这绝对是最靠谱的方案：

• 宿主页面监听scroll和resize事件，用getBoundingClientRect()判断自己页面里的iframe元素是不是在视口内
• 宿主通过postMessage给iframe发个消息，告诉它“我看见你了”或者“你滚出视口了”
• iframe这边监听message事件，拿到状态后执行对应的操作

但如果完全没法接触到宿主的代码，这个方法就用不了。

总的来说，如果必须纯靠iframe内部搞定，只能用第一种节流检测的近似方案；要是能争取到宿主的一点点协作，postMessage绝对是首选。

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