是的,这很奇怪。我进行了大量的谷歌搜索,发现数百篇文章似乎为我指明了正确的方向,但似乎没有一篇起作用。
这是我正在尝试做的事情的最新体现:
父页面
<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 到父级运行会导致问题。
上面的代码什么也没做,我试过的其他选项也没有!
*编辑应该加上,所有文件都在同一台服务器上,跨域问题不是问题
最佳答案
$('#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/