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

StackOverflow https://stackoverflow.com/questions/2236828

Вопрос

Этот вопрос уже имеет ответ здесь:

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

  • Окно A и окно B имеют тот же домен
  • У окна A и у окна B нет родительского окна.

Вопросы:

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

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

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

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

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

Это было полезно?

Решение

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

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

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

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

Другие советы

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

// 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);
});

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

Вы сказали свое:

Цель Utlimate состоит в том, чтобы сделать что -то вроде Facebook, где, если вы откроете 4 вкладки Facebook, и пообщаться в одной вкладке, чат актуализируется на каждой вкладке Facebook, если он аккуратный!

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

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

Помимо предстоящего Sharedworker, вы также можете использовать междокументированные сообщения, что гораздо широко Поддерживается. Анкет В этом сценарии должно быть главное окно, которое отвечает за открытие всех других окон window.open. Анкет Дочерние окна могут затем использовать Postmessage на их window.opener.

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

Другие методы отступления:
Плагин Postmessage для jQuery с Window.location.href Запах для старых браузеров
Решение на основе файлов cookie для непревзойденного общения

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

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

У родителя откройте окна, как это:

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

В детской, доступ к детям, как это:

childB = window.opener.childA

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top