Запуск пользовательского события из iframe в родительский документ

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

Любые советы?

Ответ 1

Это работает:

parent.$('body').trigger('eventName');

событие, инициированное внутри iframe, будет обнаружено в родительском документе.

Ответ 2

Я столкнулся с подобной проблемой и использовал window.postMessage для решения.

В настоящее время API поддерживает только передачу строки, но если вы измените свое решение, оно может быть мощным. Подробнее здесь

Со страницы источника (используется iframe):
API postMessage ожидает 2 параметра - сообщение, цель

например: window.parent.postMessage("HELLO_PARENT", 'http://parent.com');

С родительской страницы (содержит iframe. Например, контейнер):

Добавьте прослушиватель событий, как обычно
```
window.addEventListener('message', handleMessage, false);
```

Определите свою функцию с помощью event.origin check (для безопасности)\

function handleMessage(event) {  
    if (event.origin != "h ttp://child.com") { return; }  
    switch(event.data) {   
         case "HELLO_PARENT":  
            alert("Hello Child");  
            break;  
    } 
}

Ответ 3

Последовательный ответ, поддерживающий как фреймы с одинаковым доменом, так и междоменный, заключается в использовании системы событий.

Цель состоит в том, чтобы отправить пользовательское событие из iframe в parent.

В исходном файле iframe:

var myCustomData = { foo: 'bar' }
var event = new CustomEvent('myEvent', { detail: myCustomData })
window.parent.document.dispatchEvent(event)

И добавьте это в родительский файл, который содержит iframe:

window.document.addEventListener('myEvent', handleEvent, false)
function handleEvent(e) {
  console.log(e.detail) // outputs: {foo: 'bar'}
}

Ответ 4

Я также нашел свой способ решить эту проблему с помощью jquery:

в родительском файле:

<body>
        <iframe src="something.html"></iframe>

</body>

<script>
 window.document.addEventListener('event', function(e){
            console.log("event:" + e.detail);
            $("iframe").contents().find(".class[title='" + e.detail + "']").css(someChanges);
</script>

так что вам не нужно добавлять какие-либо другие EventListener в ваши iFrames.

конечно, может быть, вы хотите увидеть мой CustomEvent:

var test  = "1";
var event = new CustomEvent('event', { detail: test })
                window.document.dispatchEvent(event);

Я надеюсь, что смогу помочь кому-нибудь...