Прикрепите событие в дочернем iframe к обработчику в родительском окне

Question

У меня нет прямого доступа к этому источнику iframe, поэтому я хотел бы сделать это, если это возможно так.

У меня есть IFRAME, порожденная JS:

<iframe name="temp_iframe" width="100%" height="95%" src="'+the_url+'"></iframe> 

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

E.g. если бы это было не в IFRAME и JQuery:

$('[name=temp_iframe] button').live('click',function(){ 
    alert('click'); 
    return false; 
}); 

EDIT: А также, это на том же домене!

Answer 1

Используйте contents() для доступа к объекту Document внутри iframe. Обратите внимание, что в общем случае проблемы с использованием библиотеки jQuery в одном документе для управления другим документом, и этого, как правило, следует избегать. Однако в случае связанных событий он работает.

$('[name=temp_iframe]').contents().find('button').click(function() { 
    alert('click'); 
}); 

Это требует, которые загружены IFrame и его содержимое, так что это в $(window).load() обработчика, если это необходимо. Вы не можете live/delegate через документы, так как события не распространяются из дочернего документа в его родительский.

Answer 2

В простом JavaScript это будет:

document.getElementById("frameId").contentDocument.getElementById("buttonId").click(); 

Если вам нужно искать элементы по значению атрибута и имя тега, вы можете:

document.querySelectorAll('[name=temp_iframe]')[0].contentDocument.getElementsByTagName('button')[0].click();