jQuery - привязка событий к динамически созданным элементам из iframe

Question

Я хотел бы привязать обработчик события onClick к каждому якорю внутри iFrame. Рассмотрим iframe как клиент IM/chat, и поэтому привязные ссылки не присутствуют в момент загрузки iframe. Я не могу контролировать исходный код iFrame, и поэтому привязки не могут иметь никаких атрибутов.

Оцените эту тему несколько раз, но я не могу найти пример с iFrame и не имел успеха после многого чтения.

Я понимаю, что должен использовать .on(). Вот что у меня есть:

HTML:

<iframe src="https://...." scrolling="no" id="chatFrame"></iframe> 

JS:

// wait for frame to load 
$('#chatFrame').on('load', function(){ 

    $('#chatFrame').on('click', 'a', function(e){ 
     e.preventDefaults(e); 
     alert("link clicked!"); 
    }); 
}); 

Я не получаю ошибки, но предупреждение не обстреливали щелчком мыши и ссылка ведет меня в новом окне (как ожидалось поведение по умолчанию).

Может ли кто-нибудь посоветовать, как привязать эти якоря iFrame?

Answer 1

вам нужно попасть внутрь iframe, используя contents(). IFrame имеет собственное окно, так что элементы в этом окне не доступны делать такие вещи, как $('iframe a')

Попробуйте

$('#chatFrame').on('load', function(){ 
    $(this).contents().find('body').on('click', 'a', function(e){ 
     e.preventDefault(e); 
     alert("link clicked!"); 
    }); 
}); 

Это также предполагает, что IFrame находится на том же домене, что и страница или не будет чтобы получить к нему доступ