Как вы делитесь событиями в Windows на одном домене?

Question

Предположим, у меня есть iframe на моей странице, и у меня есть событие, которое может быть запущено из родительского или внутри фрейма, но мне нужно, чтобы прослушиватели на обеих страницах выполнялись при запуске любой из них. Каков наилучший способ сделать это?

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

Я использую jQuery, но с удовольствием приду с голым javascript, если требуется.

То, что я пробовал до сих пор, приведено на простом примере:

На родителя:

HTML:

<input type="button" value="Click me"/>
<iframe src='child.html'/></iframe>

JS:

$(function() {
  var $iframe = $('iframe');
  $(document).on('custom_event', function() {
    alert('hello from parent!');
    $($iframe[0].contentWindow.document).trigger('custom_event');
  });
  $('input').on('click', function() {
    $(document).trigger('custom_event');
  });
});

На ребенка:

HTML:

<input type="button" value="Click me too"/>

JS:

$(function() {
  $('input').on('click', function() {
    $(document).trigger('custom_event');
  });
  $(document).on('custom_event', function() {
    alert('hello from child!');
    $(window.parent.document).trigger('custom_event');
  });
});

Я ожидаю, что нажатие любой кнопки также вызовет 'custom_event' в другом окне. Т.е. в родительском объекте можно запускать события во фрейме с помощью $ iframe.contentWindow.document, а также во фрейме, чтобы иметь возможность инициировать события с помощью window.parent.document, но, увы, нет! Нет ошибок, предупреждений или каких-либо других подсказок.

Я делаю что-то не так, упускаю что-то очевидное или это просто невозможно?

Спасибо за любую помощь.

Answer 1

У меня был тот же сценарий недавно. Ключ заключается в том, чтобы найти элемент DOM высокого уровня, на который может ссылаться дочерний или родительский элемент для отправки события, такого как div контейнера приложения.

У меня было несколько iframe, и я передал идентификатор "targetFrame", чтобы только правильный выполнялся, учитывая, что все кадры перехватили событие (лучшая практика MVC - слабая связь). Вы также можете динамически добавлять любые параметры, которые вам нравятся.

Пример кода для дочернего iFrame для запуска события в контейнер:

var evt = document.createEvent('Event');
evt.initEvent('myEvent', true, true);
evt.targetFrame = "Frame1";
element = parent.document.getElementById('containerDiv'); // $('#containerDiv') for parent
element.dispatchEvent(evt);

Код для детского iframe для прослушивания событий:

parent.document.addEventListener('myEvent', function( evt) {
    if(evt.targetFrame == "Frame1") {
        // won't execute your code here in other frames.
    }
});

Вам просто нужно выяснить, какая ссылка "parent.document" работает для вашего приложения.

Надеюсь, это поможет.