Определите событие для элемента iFrame с помощью jQuery

Question

Я пытаюсь определить прямое событие в хранилище тегов img на iFrame. Например, я хотел бы получить простое окно предупреждения javascript при нажатии на изображение в моем iFrame.

Знаете ли вы, как я могу определить события для iFrame, потому что я хотел бы добавить что-то вроде $('img').live("click",function() .... но только для элементов в iFrame.

Обратите внимание: теги img динамически добавляются в мой iFrame после загрузки страницы.

Спасибо за вашу помощь.

Nicolas

Answer 1

Вы можете сделать это, если вы

1. убедитесь, что на странице в iframe есть собственная загруженная копия jQuery [ред .: , которая действительно необходима только для операций jQuery, встроенных в саму страницу фрейма ]
2. из внешнего документа, работайте с документом iframe следующим образом:

$('#iframeId').contents().find('img') // ...

Answer 2

Другие решения здесь в значительной степени близоруки, поскольку то, что вы пытаетесь сделать, довольно сложно в базовом JavaScript.

Я бы предложил также использовать контекст jquery - и я настоятельно рекомендовал бы дождаться полной загрузки iframe, иначе ни одно из предыдущих предложений не сработало бы ...

$("#frame").ready(function () { //wait for the frame to load

  $('img', frames['frame'].document).bind("click",function(){
   alert('I clicked this img!');
  });

});

Как правило, это работает, если вы не обновите iframe или не обновите его, и в этом случае все привязки событий завершатся неудачно ... и, что еще хуже, события .live не поддерживаются в iframe - по крайней мере, не для меня .

Answer 3

 $("iframe").contents().find("img")

Это будет предназначаться для изображений в пределах iFrame. Но имейте в виду, что jquery будет проходить через iFrame только в том случае, если это не является нарушением межсайтовой политики браузера (или jquery).

Это означает, что если iframe google.com, вы не можете коснуться внутренней DOM.

Answer 4

Вы можете запустить событие, например, так:

parent.$('#dlg').trigger('onTitle');

затем удерживайте событие так:

$('#dlg').bind('onTitle', function(){ alert(); });

Answer 5

это сработало для меня. NB: убедитесь, что вы также указали библиотеку jquery на странице iframe

$(document).ready(function(){
    $('#iframeid').load(function(){ //make sure that all elements finish loading
            $('#iframeid').contents().find('img').live({
                 click: function(){
                    alert('clicked img');
                 }
            });
        });
    });

Answer 6

jQuery.bind () не будет работать с внешними документами. По крайней мере, в jQuery 1.6.2.

Однако вы можете привязаться к событиям DOM:

$("iframe").contents().find("img").onclick = function() { // do your staff here };

Если на данный момент у вас нет полного списка изображений, вы можете использовать распространение событий:

$("iframe").contents().find("body").onclick = function() { // do your staff here };

Будет работать событие с пользовательскими событиями:

$("iframe").contents().find("body").onmyevent = function() { // do your staff here };

Еще одна вещь, которую нужно помнить ... содержимое кадра загружается асинхронно. Так что связывайте свои обработчики ПОСЛЕ загрузки содержимого iframe:

var $iframe = $("iframe"); 
$iframe.bind("load", null, funcion(e) {
    $iframe.contents().find("body").onclick = function() { // do your staff here }; 
});

В более сложных случаях обрабатывайте клики на изображениях внутри iframe и запускайте пользовательские события, которые впоследствии можно будет обрабатывать на уровне тела. Особенно, если у вас полностью динамический контент и вы хотите привязать к «живым» событиям внутри iframe.