是否可以为在 iframe（同一域）内导航的用户捕获 JS 事件？

Posted 2023-05-09

【中文标题】是否可以为在 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 事件

此解决方案可能在短期内有效，但不可扩展，因为它不支持其他领域、合作伙伴，因为您的应用需求发生变化。