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

Jam*_*oll 5 javascript iframe jquery click jquery-events

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

这是我正在尝试做的事情的最新体现:

父页面

<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>
Run Code Online (Sandbox Code Playgroud)

带框架的页面(位于主窗口中)

<html>
    ' LOADS OF STUFF INCLUDING:
    <li id="clickThis">Click This</li>
</html>
Run Code Online (Sandbox Code Playgroud)

显然,我在这里尝试做的是当用户单击子框架中的按钮时在父页面中运行一些代码。

它需要工作live,因此如果框架中的页面发生更改,它仍然会被父级捕获(该元素存在于将加载到框架中的所有页面上)

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

上面的代码没有任何作用,我尝试过的任何其他选项也没有任何作用!

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

Eli*_*gem 0

为什么要使用find将事件侦听器绑定到可能不存在的元素?为什么不尝试一下:

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

顺便说一句:由于您的代码位于 的 Ready 回调中#mainWindow,因此无需$('#mainWindow')第二次使用,因为这将再次扫描 DOM 树。只需使用thisor $(this),因为它无论如何都会引用 mainWindow 元素。

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