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

Моя главная цель:

Переход к моему приложению, откройте ссылку на новой вкладке, сделайте что-то на новой вкладке и отправьте событие на вкладку parent-main для обновления.

Я изучил 2 метода, которые не делают именно то, что мне нужно:

  • postMessage - работает, насколько я знаю только на iframe, а не на вкладках
  • window.opener - работает только с window.open(url), который открывает только новое окно, а не новую вкладку.

Как передать событие от дочернего элемента родительскому, используя вкладки? Я был бы рад за конкретный пример кода javascript в родительском и дочернем. Он должен работать для междоменного (например: www.mydomain.com и bills.mydomain.com).

Есть ли решение jQuery, которое мне не хватает?

Ответы

Ответ 1

Следующие работы для меня в chrome, firefox, т.е. (не тестировали больше браузеров)

принять 3 документа

  • (www.mydomain.com/parent.html) страница, содержащая "основной" документ со ссылкой
  • (bills.mydomain.com/child.html) страница, которая будет открыта по ссылке
  • (www.mydomain.com/dispatcher.html) объясняется позже

сначала установите свойство домена всех трех документов на mydomain.com

<script>
document.domain="mydomain.com";
</script>

в parent.html создайте скрытый iframe с именем-свойством, например. "Hiddenframe". Также создайте некоторую функцию, которая позже может получить ответ.

parent.html теперь должен выглядеть следующим образом:

<script>
document.domain="mydomain.com";
function fx(msg)//receives the response
{
  alert(msg)
}
</script>
<iframe name="hiddenframe" style="display:none"></iframe>
<a href="http://bills.mydomain.com/child.html" target="_blank">click</a>

В child.html теперь вы сможете загрузить документ в скрытый iframe внутри parent.html

<script>
document.domain="mydomain.com";
window.open('http://www.mydomain.com/dispatcher.html','hiddenframe');
</script>

(не путайте с помощью использования window.open() здесь, не откроется новое окно, страница будет загружена в iframe в parent.html)

В dispatcher.html теперь вы можете вызвать функцию внутри parent.html

<script>
document.domain="mydomain.com";
parent.fx('you just got some response');
</script>

Когда вам нужно только перезагрузить parent.html, это немного проще.

Снова установите document.domain-property в parent.html и child.html(вам не нужен iframe в parent.html и dispatcher.html)

В parent.html также задано имя-свойство окна, например

<script>
  window.name="parentTab";
</script>

В child.html теперь вы можете получить доступ к parentTab -window (tab)

<script>
    document.domain="mydomain.com";
    window.open('http://www.mydomain.com/parent.html','parentTab');
</script>

... или просто используйте "parentTarget" в качестве целевого свойства ссылки или формы в child.html

Ответ 2

Что я сделал для себя, я воспользовался некоторым ajax для отправки изменений из окна2 в базу данных. Я выполнил JSON, чтобы вытащить новые данные из базы данных обратно в окно1

Ответ 3

Увидев, как подобные вопросы говорят только о window.open (который вы не хотите использовать), и как afaik нет простого способа получить все окна в одном домене, для чего вы хотите, вам, вероятно, нужно написать свою собственную инфраструктуру, чтобы сделать это, используя window.sessionStorage.
Я не думаю, что вы получите доступ к субдоменам с ним и, безусловно, не к другим доменам.

Практические идеи для передачи сообщений по конкретным окнам с помощью sessionStorage.
Вы можете передавать данные в URL-адресе (GET), поэтому способ передачи сообщений может заключаться в том, чтобы родительский генерировать уникальный идентификатор для себя parentID, уникальный идентификатор для него child childID (который вставлен в URL вместе с parentID при щелчке, если вы используете <a> или скрытое поле, если вы не возражаете против <form method="GET">), а затем sessionStorage сохраняйте сообщения родителям с помощью таких клавиш, как parentID.childID.timeStamp, интервал как родительского, так и дочернего, который ищет ключи sessionStorage, начиная с идентификатора окна, затем . (т.е. родительский ищет parentID.) в совпадении копирует ключ и значение в новый var, delete (так что он не будет найден снова), а затем разобрать по желанию.

Я знаю, что это немного многословно, но я думаю, что это гораздо легче объяснить как концепцию, чем писать код рабочего кода.