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

Question

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

У меня есть iframe, сгенерированный JS:

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

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

например. если это не было в iframe и в jQuery:

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

РЕДАКТИРОВАТЬ: И также, это в том же домене!

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();