将子框架中的点击事件捕获到父框架中答案

【问题标题】：Capture click event from child frame into parent frame将子框架中的点击事件捕获到父框架中
【发布时间】：2012-07-09 22:19:41
【问题描述】：

是的，这很奇怪。我已经进行了大量的谷歌搜索，发现了数百篇似乎为我指明了正确方向的文章，但似乎没有一个有效。

这是我正在尝试做的最新版本：

父页面

<html>
<head>
    <script>
    $('#mainWindow').ready(function () {
       $('#mainWindow').contents().find('#clickThis').live('click', function () {
           alert('Click detected!');
        });
    });
    </script>
</head>
<body>
    <iframe id="mainWindow" name="mainWindow" src="myMainPage.aspx" style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%"></iframe>
    <iframe src="myOtherPage.aspx"></iframe>
</body>
</html>

框架页面（位于主窗口中）

<html>
    ' LOADS OF STUFF INCLUDING:
    <li id="clickThis">Click This</li>
</html>

所以很明显我在这里要做的是在用户单击子框架中的按钮时在父页面中运行一些代码。

它需要工作live，所以如果框架中的页面发生变化，它仍然被父级捕获（这个元素存在于将加载到框架中的所有页面上）

在各种其他搜索之后，我已经能够跨 iFrame、从父级到 iFrame 以及从 iFrame 到 iFrame 运行代码，但是从 iFrame 到父级运行会导致问题。

上面的代码什么都不做，我试过的其他选项也没有！

*编辑应该添加，所有文件都在同一台服务器上，跨域问题不是问题

【问题讨论】：

live 已弃用。请改用on。
@Rune 好的，但是上面的代码都不能用！

标签： javascript jquery iframe click jquery-events

【解决方案1】：

为什么要使用find 将事件侦听器绑定到可能不存在的元素？为什么不试试：

$('#mainWindow').ready(function()
{
    $('#clickThis').on('click',function()
    {
        alert($(this).html());//or something
    });
});

顺便说一句：由于您的代码在 #mainWindow 的就绪回调中，因此无需再次使用 $('#mainWindow')，因为这将再次扫描 DOM 树。只需使用this 或$(this)，因为它无论如何都会引用mainWindow 元素。

如果 on 对您不起作用，请不要忘记检查您是否也包含最新版本的 jQuery。这也可能是 on 不起作用的原因。

【讨论】：

我真的不知道我为什么要使用find 我只是在尝试我在网上找到的大量不同示例。由于某种原因，您的示例也不起作用。使用live 或on 我没有得到alert
试试$($('#mainWindow').document).ready，因为 iFrame 有自己的文档对象

【解决方案2】：

This works fine for me:

$('#myframe').contents().on('click', function () {
    $('#result').text('clicked');
});

如果您想仅在内容文档的一部分上捕获事件，请使用.contents().find(<selector>)（<selector> 是例如'body'）而不是仅使用.contents()

注意事项：您的所有页面必须存在于同一个 document.domain 下，否则 JavaScript 调用将失败。您将在控制台中看到这作为安全异常出现。这是由于same-origin policy。

【讨论】：

这快把我逼疯了！在这么简单的事情上浪费了这么多时间！！您的 jsFiddle 在 Chrome 中有效，但在 FIrefox 中无效，但将相同的代码翻译到我的项目中也无效！

【解决方案3】：

答案太晚了，但我遇到了同样的问题，下面的代码适用于所有浏览器：

$('#myiframe').on('load', function () {
   $(this).contents().on('click', function () {
      alert('Click detected!');
   })
})

它附加onclick 处理程序，但仅在加载 iframe 之后。我将这里留给后代和其他任何寻找相同问题答案的人。

【讨论】：

【解决方案4】：

如果您还想在 iframe 中捕获一些数据，这将适合您：有一个 iframe 元素，其中包含多个图像。 iframe 在父页面内呈现。无论您在 iframe 中单击哪个图像，该图像的 id 都会发送回父级。

在 iframe 内：

<script>
function vote(e) {
            myMessage = e;
            window.parent.postMessage(myMessage, "*");
            return false;
        }
</script>

        <body><div>
        <img id="Image1" src="file:///Users/abcd/Desktop/1.jpeg" width="200px" onclick="vote(this.id)">
        </div></body>

父页面内：

</script>
function displayMessage (evt) {
        var message = "You voted " + evt.data;
        document.getElementById("received-message").innerHTML = message;
    }

    if (window.addEventListener) {
        // For standards-compliant web browsers
        window.addEventListener("message", displayMessage, false);
    }
    else {
        window.attachEvent("onmessage", displayMessage);
    }
</script>

 <body><div id="received-message"></div></body>

这不仅会捕获点击，还会捕获 iframe 内被点击元素的 id。此外，这不需要 JQuery。

【讨论】：