5

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

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

父页面

<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 到父级运行会导致问题。

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

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

4

4 回答 4

4

这对我来说很好：

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

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

注意事项：您的所有页面都必须存在于同一目录下，document.domain否则 JavaScript 调用将失败。您将在控制台中看到这作为安全异常出现。发生这种情况是由于同源策略。

于 2012-07-10T12:59:17.070 回答
2

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

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

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

于 2015-12-22T19:14:53.060 回答
2

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

内嵌框架：

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

于 2017-01-11T11:39:45.760 回答
0

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

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

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

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

于 2012-07-10T12:40:58.757 回答