javascript - 从子框架捕获点击事件到父框架

标签 javascript jquery iframe 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>

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

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

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

它需要实时工作,所以如果框架中的页面发生变化,它仍然会被父级捕获(该元素存在于将加载到框架中的所有页面上)

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

上面的代码什么也没做,我试过的其他选项也没有!

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

最佳答案

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 .

关于javascript - 从子框架捕获点击事件到父框架,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11413328/

相关文章:

javascript - jQuery .css - z-index 未应用于元素

javascript - 关闭后退按钮上的弹出窗口

javascript - 通过 Jquery data() 附加时以及直接通过 HTML 中的数据属性附加时检查 HTML 元素中的 data()

javascript - 在 iframe 中打开 php 并将数据提取到变量中

javascript - Select2 - 按查询排序结果

javascript - 风格和逻辑分离 : changing of mouse cursors

javascript - 在 animate settimeout 之后执行函数

javascript - 加载 Highcharts 文档时 DOM 节点计数增加 (Chrome)

javascript - 如何根据元素高度动态调整 iframe 高度?

javascript - 无法通过 Javascript 编辑 Iframe 的 'src' 值