Могут ли события, инициируемые из iframe, обрабатываться элементами его родителя? - PullRequest
Новая
       16

Могут ли события, инициируемые из iframe, обрабатываться элементами его родителя?

12 голосов
/ 12 января 2010

Предположим, у меня есть страница, расположенная в www.example.com/foo, и она содержит <iframe> с src="http://www.example.com/bar". Я хочу иметь возможность вызвать событие из /bar и услышать его от /foo. Используя библиотеку Prototype, я безуспешно пытался сделать следующее:

Element.fire (родитель, 'ns: frob');

Когда я делаю это, в Firefox 3.5 я получаю следующую ошибку:

Узел не может использоваться в документе, отличном от того, в котором он был создан "code:" 4 Линия 0

Не уверен, связано ли это с моей проблемой. Есть ли какой-то механизм безопасности, который не позволяет сценариям в /bar запускать события в /foo?

Ответы [ 4 ]

12 голосов
/ 12 января 2010

События могут обрабатываться функцией, определенной в родительском окне, если iframe является страницей из того же домена (см. Статью MDC по Одинаковая политика происхождения ); однако события не будут всплывать с iframe на родительскую страницу (по крайней мере, в моих тестах).

6 голосов
/ 02 апреля 2010

Я еще не тестировал этот кросс-браузер, но он работает в FF.

В iFrame вы можете запустить элемент parent.document: 

Event.observe(window, 'load', function() {
  parent.document.fire('custom:event');
});

и в родительском кадре вы можете поймать его с помощью: 

document.observe('custom:event', function(event) { alert('gotcha'); });
2 голосов
/ 12 января 2010

вместо того, чтобы перехватить событие на главной странице, вы можете перехватить событие в iframe и вызвать функцию на главной странице. 

<-- main page -->
function catchIt()
{
 // code here
}


<-- iframe page -->

function doIt()
{
 top.catchIt(); 
}

<a onclick="doIt();">test</a>

Я думаю, что это будет работать, но не проверял

0 голосов
/ 10 августа 2018

Это должно работать как положено, чтобы делать то, что вам нужно:

index.html: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    $(document).on('eventhandler', function() {               
        alert('event was fired');
    });
}); 
</script>

iframe.html: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    parent.$(parent.document).trigger('eventhandler');  
});
</script>
...