Межстраничное общение в WWW?

Есть ли способ сделать межпроцессное взаимодействие на стороне клиента между несколькими веб-страницами в JavaScript? В идеале я хотел бы выполнить это без какого-либо сложного обновления состояния сервера, проверки связи и т. Д. И заставить его работать исключительно на клиенте. Если бы я мог сделать этот кросс-браузер, я был бы на небесах, ха-ха. Есть идеи? Спасибо!

Источник

2 ответа

Решение

Есть много способов сделать межоконный обмен информацией. Это Window.postMessage, Local Storage, WebRTC и в настоящее время Shared Web Workers.

У каждого из них есть свои преимущества / недостатки:

  • Локальное хранилище работает только на страницах того же источника (источник - протокол:// сайт: порт). Он также передает сообщение каждому открытому окну того же источника, поэтому он медленный, если у вас открыто много страниц. К сожалению, это единственная технология с несколькими окнами, поддерживаемая в IE11 и ниже.
  • Совместно используемые работники поддерживаются только в Chrome и Firefox (и также поддерживаются только источники одного и того же файла, а файл worker.js должен загружаться из одного источника). Вы также должны "ретранслировать" трафик связи с одной страницы на другую.
  • Window.postMessage работает только между родительскими / дочерними окнами, но поддерживает перекрестное происхождение!

Взаимодействие между двумя независимыми веб-сайтами действительно неуклюже. Вы должны либо выполнить window.open() с первого веб-сайта и использовать postMessage для взаимодействия со вторым веб-сайтом, либо настроить эту сложную архитектуру, в которой вы используете скрытые фреймы на каждом сайте для общения с размещенной веб-страницей. на тот же адрес веб-сайта, и эти iframes затем общаются друг с другом через локальное хранилище или Shared Worker. Это называется "узлом связи". (Довольно сложно, правда?)

Хуже всего то, что межстраничное общение было расценено как уязвимость безопасности и в значительной степени избегалось. Если бы у некоторых был свой путь, я думаю, что postMessage из разных источников будет удален. То, что я хотел бы видеть, - это некоторые усовершенствования протокола и некоторые oAuth-подобные методы, созданные для того, чтобы мы могли защитить эту технику и сделать ее разумной. В будущем будет много движения данных к клиенту, и разделение их между веб-страницами станет критическим.

Тем не менее, не переделывать колесо. Есть несколько библиотек, которые делают возможными межоконные коммуникации.

  • Endpoint.js - разработанная мной библиотека (заявление об отказе от ответственности), которая обеспечивает связь между окнами (с несколькими источниками), вкладками, веб-работниками, клиент-сервером, а также IPC между процессами. Это также создает специальную оверлейную сеть, которая позволяет всем этим методам передавать информацию друг другу.
  • crosstab - реализует описанный выше подход "концентратор связи".
  • ozp-iwc - платформа IPC от OZone Widget Framework. Включает локальное хранилище и PostMessage
Источник

Попробуйте этот код для автора сообщения

function sendMessage(name, value) {
    var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

sendMessage("test", "hello world!")

Откройте второе окно и попробуйте прослушивание этого сообщения

function getMessage(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}
function check() {
    var message = getMessage('test');
    var element = document.getElementById('output');
    element.innerHTML = message;
}
window.setInterval(check, 1000);

Он отлично работает на Chrome, вы также должны убедиться, что он работает в других основных браузерах, особенно в IE

Источник
Другие вопросы по тегам