Question

对，这很奇怪。我已经完成了大量的谷歌搜索，发现数百篇文章似乎指向了我正确的方向，但似乎都没有。

这是我想要做的最新化身：

父页面

<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>

Framed Page（坐在mainWindow）

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

显然，我在这里要做的是在用户点击子框架中的按钮时在父页面中运行一些代码。

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

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

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

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

Answer 1

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引起的。

Answer 2

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

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

它附加onclick处理程序，但仅在加载iframe之后。我将此留给后人，以及寻找同一问题答案的其他人。

Answer 3

如果你想在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。

Answer 4

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

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

BTW：由于您的代码位于#mainWindow的准备回调中，因此无需再次使用$('#mainWindow')，因为这将再次扫描DOM树。只需使用this或$(this)，因为无论如何它都会引用mainWindow元素。

如果启用不适合您，请不要忘记检查是否包含最新版本的jQuery。这也是导致无法工作的原因。

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

4 个答案: