是否可以为在 iframe(同一域)内导航的用户捕获 JS 事件?

Posted

技术标签:

【中文标题】是否可以为在 iframe(同一域)内导航的用户捕获 JS 事件?【英文标题】:Is it possible to catch a JS event for a user who navigates inside of iframe (same domain)? 【发布时间】:2012-01-18 14:16:09 【问题描述】:

我有一个页面,其中包含多个 iframe,这些 iframe 在同一域上加载不同的页面。每个 iframe 都有包含链接、表单等的普通页面。我需要做的是向父页面添加一段 JS,它可以捕获用户在任何 iframe 内导航的事件。因此,如果有人单击 iframe 中的某个内容或提交表单或执行类似操作,我想抓住它。到目前为止,我已经尝试了不同的变体,但没有运气

    $(document).ready(function() 
        $("iframe").each(function() 
            $(this).bind("unload", function()
                alert(1);
            );
        ); 
    );

【问题讨论】:

developer.mozilla.org/en/DOM/window.postMessage ? 您是否可以控制在 iframe 中打开的页面? 是的,我有控制权,如果我从实际页面内部分配事件,它确实有效。但我想知道是否可以做任何事情来分配这些页面之外的事件。 @JeffreySweeney 是正确的,如果您的浏览器支持(IE7+),最好的做法是使用 postMessage() 实现解决方案。 【参考方案1】:

你可以这样做:

$(document).ready(function() 
    $("iframe").each(function() 
        $(this).contains().find('body').on("click", "a", function()
            alert('1');
        );
    ); 
);

通过这种方式,您可以从父页面附加一个事件处理程序,该处理程序检测对 iframe 内每个链接的点击并发出警报 1。这仅适用于 iframe 位于主页的同一域中,否则 contains()什么都不做。

【讨论】:

为什么“addEventListener”不是解决方案的一部分?会是,还是应该是? @BrentArias 我使用 jQuery on() 函数向 body 元素添加一个事件监听器。监听器在 <a> 标签上监听 click 事件 此解决方案可能在短期内有效,但不可扩展,因为它不支持其他领域、合作伙伴,因为您的应用需求发生变化。

以上是关于是否可以为在 iframe(同一域)内导航的用户捕获 JS 事件?的主要内容,如果未能解决你的问题,请参考以下文章

获取 iframe 内输入字段的值

父窗口上下文中来自iframe的Websocket连接

在javascript中读取iFrame(不在同一个域-YouTube)中的div状态[重复]

跨域资源共享标头可以授权 X-Domain IFRAME 访问吗?

是否可以从内部更改 iframe 的宽度/高度

是否可以在 iframe 中更新 angularjs 表达式?