Javascript; связь между вкладками / окнами с одинаковым происхождением [дубликат]

этот вопрос уже есть ответ здесь:

  • Связь между вкладками или окнами 8 ответов

У меня есть два окна: окно A и окно B.

  • окно A и окно B имеют одинаковый домен
  • окно A и окно B не имеет родителя окно.

вопросы:

  1. возможно ли для окна A получить ссылку на окно B?
  2. каков самый элегантный способ сделать окно a уведомить что-то в окно B?
    (включая новые спецификации HTML5)

два способа, которыми я осознаю это:

  • обмен сообщениями по серверу: где окно B регулярно спрашивает сервер, если окно a уведомило что-то
  • обмен сообщениями по локальным данным (HTML5): когда окно хочет сообщить что-то меняет локальные данные, окно Б регулярно проверяет информацию для каких-либо изменений.

но эти два способа не так элегантны.
Например, было бы неплохо получить ссылку на окно B и использовать окно.postMessage () (HTML5)

конечная цель-сделать что-то вроде facebook, где, если вы открываете 4 вкладки facebook и чат на одной вкладке, чат обновляется на каждой вкладке facebook, что аккуратно!

7 62
javascript html5 local-storage web-applications postmessage

7 ответов:

Я придерживаюсь общего локального решения данных, упомянутого в вопросе, используя localStorage. Это, кажется, лучшее решение с точки зрения надежности, производительности и совместимости браузера.

localStorage реализован во всех современных браузерах.

The storage событие возникает, когда другое tabs вносит изменения в localStorage. Это довольно удобно для целей связи.

ссылки можно найти здесь:
Webstorage
Webstorage-событие хранения

102

стандарт BroadcastChannel позволяет это сделать. Прямо сейчас он реализован в Firefox и Chrome (caniuse,mdn):

// tab 1
var ch = new BroadcastChannel('test');
ch.postMessage('some data');

// tab 2
var ch = new BroadcastChannel('test');
ch.addEventListener('message', function (e) {
    console.log('Message:', e.data);
});
18

SharedWorker-это спецификация WHATWG/ HTML5 для общего процесса, который может взаимодействовать между вкладками.

11

ты сказал:

utlimate цель состоит в том, чтобы сделать что-то вроде facebook, где, если вы открываете 4 вкладки facebook, и чат в одной вкладке, чат актуализируется на каждой вкладке facebook, что аккуратно!

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

лет назад я обнаружил, что если бы я сделал window.open используя имя существующего окна и пустой URL, я получил ссылку на существующее окно (это поведение даже документировано на MDC и комментарий документы MSDN предполагает, что он также работает в IE). Но это было много лет назад, я не знаю, насколько универсальна поддержка этого в современном мире, и, конечно же, у вас не будет окна имя для поиска, если все ваши окна не содержат имя iframe для связи, названной однозначно через код на стороне сервера, а затем переданной другим окнам с помощью кода на стороне сервера... (Страшная мысль: это действительно может быть осуществимо. Сохраните" текущие " имена окон, связанные с зарегистрированной учетной записью в таблице, дайте список любому новому созданному окну, которое входит в эту учетную запись, отбраковывает старые неактивные записи. Но если список немного устарел, вы откроете новые окна, когда в поисках других... И я уверен, что поддержка iffy от браузера к браузеру.)

4

кроме предстоящего SharedWorker, вы также можете использовать обмен сообщениями между документами, который намного более широко поддерживает. В этом случае должно быть главное окно, которое отвечает за открытие всех других окон с window.open. Затем дочерние окна могут использовать postMessage на window.opener.

Если использование flash является вариантом для вас, есть также гораздо старше LocalConnection практически поддерживается на любом клиенте с установленной flash (пример кода).

другое использование относительных методов:
плагин postMessage для jQuery с окном.местоположение.резервный вариант href для старых браузеров
печенье-решение для некурящих, обмен мгновенными сообщениями

4

AFAIK, невозможно общаться через окна, если у них нет одного и того же родителя.

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

в родителе откройте окна следующим образом:

childA = window.open(...);
childB = window.open(...)

в ChildA, доступ к childB, как это:

childB = window.opener.childA
1

У меня есть аккуратный способ сделать такой трюк, но с ограничениями: вы должны разрешить всплывающие окна для вашего домена, и вы всегда будете открывать одну страницу (как вкладку или как всплывающее окно), которая будет реализовывать связь между окнами.

вот пример: http://test.gwpanel.org/test/page_one.html (обновить страницу после включения всплывающих окон для домена)

главная особенность этого трюка-всплывающее окно открывается с фрагментом url ' # ' в конце концов, это заставляет браузер не меняйте расположение окна и хранить все данные. И окно.метод postMessage делать все остальное.

0