关于使用嵌套$(document).ready()检测嵌套页面是否激活的疑问

嘿，刚接触jQuery遇到这种跨文档的事件问题很正常，我来帮你理清思路，逐个解答你的疑问：

关于嵌套$(document).ready()的澄清 #

• 首先明确：嵌套的$(document).ready()只会监听当前主页面的DOM就绪状态，完全感知不到iframe内部页面的就绪情况。因为每个iframe都是独立的浏览器文档环境，主页面的document对象和iframe里的document是完全分离的两个实例。所以不管你套多少层$(document).ready()，都只能触发主页面的就绪回调，和iframe内部页面毫无关系。
• 回到你的场景：想用主页面的$(document).on()捕获iframe内的用户活动，这本身就行不通——主页面的事件委托只能监听自身DOM元素上的事件，iframe内部的元素属于另一个独立文档，主页面的document根本捕获不到这些跨文档事件。所以不管你用几层$(document).ready()包裹，都解决不了这个问题。

可行的解决方案分析 #

你提到的两种方案，我们来拆解下合理性：

1. 在iframe独立页面中添加活动检测：这其实是最直接、可靠的方案。既然iframe是独立文档，那就在它的代码里单独写事件监听：

   $(document).on("click mousemove keydown", function() {
     // 通知主页面当前iframe处于活跃状态
     parent.postMessage({ isActive: true }, window.location.origin);
   });
   

   然后主页面监听message事件，收到通知后更新activity状态再发送心跳包。这种方案逻辑清晰，避开了跨文档事件捕获的限制，完全贴合你的需求，虽然是变通方案但非常合理。
2. 通过失焦/鼠标静止判断：这种方案确实有明显局限性——比如用户只是把鼠标移进iframe但没操作，或者iframe内有自动运行的内容，都会导致误判。你放弃这个方案是完全正确的。

额外小技巧 #

如果以后需要主页面和同域iframe交互，还可以直接获取iframe的document对象绑定事件（跨域场景下不行，受同源策略限制）：

// 等待iframe加载完成后再操作
$("#your-iframe-id").on("load", function() {
  const iframeDoc = this.contentDocument || this.contentWindow.document;
  $(iframeDoc).on("click mousemove keydown", function() {
    activity = true;
  });
});

不过这种方式要求主页面和iframe必须同域，否则还是用postMessage()的方案更稳妥。

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