Javascript 使用 jQuery 在 iFrame 元素上定义事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2218404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Define an event on iFrame element with jQuery
提问by sanceray3
I try to define a live event on img tags store on a iFrame. For example, I would like obtain a simple javascript alert box when I click a image on my iFrame.
我尝试在 iFrame 上的 img 标签存储上定义实时事件。例如，当我单击 iFrame 上的图像时，我想获得一个简单的 javascript 警报框。
Do you know how i can define the events for the iFrame, because I would like to put a thing like $('img').live("click",function().... but only for the elements on iFrame.
你知道我如何为 iFrame 定义事件吗，因为我想放一个像$('img').live("click",function().... 但只针对 iFrame 上的元素。
Please note:img tags are dynamically added on my iFrame after page load.
请注意：img 标签在页面加载后动态添加到我的 iFrame 上。
Thanks for your help.
谢谢你的帮助。
Nicolas
尼古拉斯
回答by Pointy
You can do it if you
你可以做到，如果你
- make sure that the page in the iframe has its own copy of jQuery loaded [ed.: only really necessary for jQuery operations internal to the frame's page itself]
- from the outer document, work into the iframe document like this:
- 确保 iframe 中的页面加载了自己的 jQuery 副本 [ed.:只有框架页面本身内部的 jQuery 操作才是真正需要的]
- 从外部文档，像这样处理 iframe 文档：
$('#iframeId').contents().find('img') // ...
$('#iframeId').contents().find('img') // ...
回答by sanceray3
The other solutions here are largely myopic, as what you are trying to do is fairly complicated in the underlying javascript.
这里的其他解决方案在很大程度上是短视的，因为您在底层 javascript 中尝试做的事情相当复杂。
I'd suggest using jquery context as well - and I'd strongly suggest waiting for the iframe to totally load or else none of the previous suggestions could work anyway...
我建议也使用 jquery 上下文 - 我强烈建议等待 iframe 完全加载，否则之前的建议都不起作用......
$("#frame").ready(function () { //wait for the frame to load
$('img', frames['frame'].document).bind("click",function(){
alert('I clicked this img!');
});
});
This should generally work UNLESS you update the iframe or refresh it, in which case all the event bindings will fail... and worse yet the .live events don't appear to be supported in iframes - at least not for me.
这通常应该可以工作，除非您更新 iframe 或刷新它，在这种情况下，所有事件绑定都会失败……更糟糕的是，iframe 似乎不支持 .live 事件 - 至少对我来说不支持。
回答by Anthony
$("iframe").contents().find("img")
This will target images within the iFrame. But be aware that jquery will only traverse the iFrame if it is not a violation of the browser's (or jquery's) cross-site policy.
这将定位 iFrame 中的图像。但请注意，如果不违反浏览器（或 jquery）的跨站点策略，jquery 只会遍历 iFrame。
That means if the iframe is google.com, you can't touch the inner DOM.
这意味着如果 iframe 是 google.com，则您无法触摸内部 DOM。
回答by Eugene Y.
jQuery.bind() won't work with external documents. At least in jQuery 1.6.2.
jQuery.bind() 不适用于外部文档。至少在 jQuery 1.6.2 中。
However you can bind to DOM events:
但是，您可以绑定到 DOM 事件：
$("iframe").contents().find("img").onclick = function() { // do your staff here };
If you do not have full list of images at the moment, you can use events propogation:
如果您目前没有完整的图像列表，您可以使用事件传播：
$("iframe").contents().find("body").onclick = function() { // do your staff here };
It will work event with custom events:
它将与自定义事件一起工作：
$("iframe").contents().find("body").onmyevent = function() { // do your staff here };
One more thing to remember... frame content is loaded asynchronously. So bind your handlers AFTER your iframe content is loaded:
还有一件事要记住……框架内容是异步加载的。因此，在加载 iframe 内容后绑定处理程序：
var $iframe = $("iframe");
$iframe.bind("load", null, funcion(e) {
$iframe.contents().find("body").onclick = function() { // do your staff here };
});
For more complicated cases handle your images clicks inside iframe, and trigger your custom events that you can later handle on the body level. Especially if you have totally dynamic content and want to bind to 'live' events inside iframe.
对于更复杂的情况，请在 iframe 内处理您的图像点击，并触发您稍后可以在正文级别处理的自定义事件。特别是如果您拥有完全动态的内容并希望绑定到 iframe 中的“实时”事件。
回答by Given Nyauyanga
this worked for me. NB: make sure you have referenced jquery library on the iframe page as well.
这对我有用。注意：确保您在 iframe 页面上也引用了 jquery 库。
$(document).ready(function(){
$('#iframeid').load(function(){ //make sure that all elements finish loading
$('#iframeid').contents().find('img').live({
click: function(){
alert('clicked img');
}
});
});
});
回答by bfbd
you can fire event innner like this:
你可以像这样触发事件内部：
parent.$('#dlg').trigger('onTitle');
parent.$('#dlg').trigger('onTitle');
then hold event like this:
然后举行这样的活动：
$('#dlg').bind('onTitle', function(){ alert(); });
