1. Что такое перекрестное взаимодействие браузера?

Межтабличная связь браузера — это процесс обмена данными и передачи информации между несколькими вкладками в одном окне браузера. Обычно каждая вкладка представляет собой независимый контекст браузера. Они изолированы друг от друга и не могут напрямую получать доступ к данным друг друга или общаться.

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

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

2. Каковы основные требования к взаимодействию между браузерами?

Межтабличная связь браузера в основном используется для следующих нужд:

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

2: Синхронизация статуса. В некоторых приложениях может использоваться несколько вкладок для отображения одного и того же статуса приложения или состояния сеанса. Благодаря взаимодействию между вкладками можно добиться синхронизации состояний, чтобы операции на одной вкладке могли немедленно отражаться на других вкладках.

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

4. Общие ресурсы. В некоторых сценариях вам может потребоваться разделить определенные ресурсы на нескольких вкладках, например сетевые подключения, аудио/видеоплееры и т. д.

5. Управление несколькими окнами. Для некоторых приложений с несколькими окнами можно использовать перекрестную связь для обеспечения связи и синхронизации данных между окнами.

Третье: взаимодействие через перекрестные таблицы браузера может быть достигнуто с помощью следующих распространенных методов:

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

Простой код случая, использующий LocalStorage или SessionStorage для реализации взаимодействия между таблицами:

// Во вкладке напишите данные в LocalStorage или SessionStorage
localStorage.setItem('sharedData',«Привет из вкладки 1»);
// или ВОЗ sessionStorage.setItem('sharedData', 'Hello from Tab 1');

// Слушайте в других вкладках и получайте изданные обновления
window.addEventListener('storage', function(event) {
  if (event.key === 'sharedData') {
    const newData = event.newValue;
    console.log('Received updated data:', newData);
  }
});

// Обновить данные в другой вкладке
localStorage.setItem('sharedData',«Привет из вкладки 2»);
// или ВОЗ sessionStorage.setItem('sharedData', 'Hello from Tab 2');

В этом примере,Первый проход во вкладкеlocalStorage.setItem()или sessionStorage.setItem()метод будетданныенаписатьLocalStorageили SessionStorageсередина。Затем,существоватьдругойвкладкасерединаслушая storage событие для захвата сохраненного события и определения события key Это данные, которыми мы делимся? SharedData, если да, получите обновленные данные newValue и обработать его.

Далее в другой вкладке проходим localStorage.setItem() или sessionStorage.setItem()обновление методаданные。

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

Простой код случая использования API широковещательного канала для реализации перекрестной связи:

Во вкладке, с которой было отправлено сообщение:

// Создать канал вещания
const channel = new BroadcastChannel('myChannel');

// Отправить сообщение
channel.postMessage('Hello from Tab 1');

Во вкладке получения сообщения:

// Создать канал вещания
const channel = new BroadcastChannel('myChannel');

// Прослушивание сообщений
channel.onmessage = function(event) {
  const message = event.data;
  console.log('Received message:', message);
};

первый Создайте его на вкладке, куда вы отправили сообщение.Broadcast Channel,и укажите уникальныйиз Название канала（здесьиспользовать «мой канал»). проходить channel.postMessage()метод Отправить сообщениена канал。

Во вкладке, на которую приходит сообщение, также создайте канал с таким же названием канала. Broadcast Channel。Затем,как channel.onmessage Назначьте функцию для прослушивания событий сообщений. При получении сообщения объект события event в data Свойство будет содержать содержимое отправленного сообщения, которое мы можем получить и обработать в функции прослушивателя.

3: SharedWorker: SharedWorker — это фоновый поток, общий для нескольких вкладок. Вкладки могут взаимодействовать через SharedWorker, отправляя и получая сообщения. Этот метод требует использования Worker API JavaScript.

Простой код случая, использующий SharedWorker для реализации взаимодействия между таблицами:

Во вкладке, с которой было отправлено сообщение:

// Создайте SharedWorker
const worker = new SharedWorker('worker.js');

// Отправить сообщение
worker.port.postMessage('Hello from Tab 1');

В общем файле сценария Worker.js:

// Слушайте связисобытие
self.onconnect = function(event) {
  const port = event.ports[0];
  
  // Прослушивание сообщений
  port.onmessage = function(event) {
    const message = event.data;
    console.log('Received message:', message);
  };
  
  // Отправить сообщение
  port.postMessage('Hello from Worker');
};

Создайте его на вкладке, куда вы отправили сообщение. SharedWorker,и укажите общий доступиз Worker Путь к файлу сценария «рабочий.js». Затем пройдите worker.port.postMessage()метод Отправить сообщениеприезжать SharedWorker。

в общем Worker файл сценария worker.js в, путем мониторинга self.onconnect событие для захвата событий подключения и получения порта связи с помощью вкладки порт. Затем передайте как port.onmessage Назначьте функцию для прослушивания событий сообщений. При получении сообщения объект события event в data Свойство будет содержать содержимое отправленного сообщения, которое мы можем получить и обработать в функции прослушивателя.

4. Service Worker: Service Worker — это сценарий, независимый от веб-страниц, который может работать в фоновом режиме и предоставлять такие функции, как автономное кэширование и обмен сообщениями. Вкладки могут взаимодействовать через Service Worker, отправляя и получая сообщения.

5：Window.postMessage()：Window.postMessage() Методы позволяют безопасно передавать сообщения между различными окнами и вкладками. Позвонив postMessage() метод и укажите целевое окно origin, вы можете отправлять сообщения на другие вкладки и слушать message событие для получения сообщений.

использовать window.postMessage() Простой код случая для реализации перекрестного взаимодействия:

Во вкладке, с которой было отправлено сообщение:

// Прослушивание сообщений
window.addEventListener('message', function(event) {
  // Убедитесь, что сообщение пришло из ожидаемого источника.
  if (event.origin !== 'http://example.com') {
    return;
  }

  const message = event.data;
  console.log('Received message:', message);
});

// Отправить сообщение на другие вкладки
const targetWindow = window.open('http://example.com/otherpage', '_blank');
targetWindow.postMessage('Hello from Tab 1', 'http://example.com');

Во вкладке получения сообщения

// Прослушивание сообщений
window.addEventListener('message', function(event) {
  // Убедитесь, что сообщение пришло из ожидаемого источника.
  if (event.origin !== 'http://example.com') {
    return;
  }

  const message = event.data;
  console.log('Received message:', message);

  // Ответ на сообщение
  event.source.postMessage('Hello from Other Tab', event.origin);
});

существовать Отправить сообщениеизвкладкасерединапроходитьиспользовать window.addEventListener('message', ...) Прослушивайте события сообщений. В функции обработки событий вы можете использовать event.origin чтобы убедиться, что источник сообщения соответствует ожиданиям. Затем вы можете использовать event.data Получить содержимое отправленного сообщения и выполнить соответствующие операции.

На вкладке отправки сообщения используйте window.open() Открыт новыйизвкладка（http://example.com/otherpage）,Затем Универсальный targetWindow.postMessage() Отправьте сообщение на эту вкладку. Здесь мы указываем целевое окно сообщения и предполагаемый источник (т. е. URL）。

Во вкладке получения сообщения,Также прошло window.addEventListener('message', ...) Прослушайте события сообщения и выполните соответствующие операции в функции обработки событий.

6：использовать Файлы cookie: данные, которыми необходимо поделиться, могут храниться в Cookies , а также читать и обновлять их на разных вкладках Печенье. Когда вкладка обновляет данные, записывайте данные в Cookies , другие вкладки можно прослушивать через Cookies Изменения событийили запланированное чтение Cookies чтобы получить последние данные.

использовать Cookies Это простой способ связи, но он в основном используется для передачи данных между клиентом и сервером, а не для прямого взаимодействия между таблицами. Файлы cookie Данные автоматически передаются между клиентом и сервером, поэтому данные можно использовать на разных вкладках.

Ниже приведениспользовать Cookies Простой код случая для передачи данных между вкладками:

Во вкладке, с которой было отправлено сообщение:

// настраивать Cookie
document.cookie = 'sharedData=Hello from Tab 1';

Во вкладке получения сообщения:

// Получать Cookie ценить
const cookies = document.cookie;
const cookieArr = cookies.split(';');

let sharedData = null;
for (let i = 0; i < cookieArr.length; i++) {
  const cookie = cookieArr[i].trim();
  if (cookie.startsWith('sharedData=')) {
    sharedData = cookie.substring('sharedData='.length, cookie.length);
    break;
  }
}

console.log('Received message:', sharedData);

7：использовать IndexedDB：IndexedDB Это клиентская база данных, предоставляемая браузером, которая может хранить и считывать данные между различными вкладками. Вкладка может записывать данные в IndexedDB, другие вкладки могут прослушивать IndexedDB изменяются события или время от IndexedDB Считайте данные для обеспечения совместного использования данных и синхронизации статуса.

Ниже приведен простой код случая использованияIndexedDB:

// Открыть или создать IndexedDBданные библиотеки
const request = indexedDB.open('myDatabase', 1);

// Библиотека данных успешно открыта.
request.onsuccess = function(event) {
  const db = event.target.result;

  // создать пространство хранилища объектов (аналогично таблице)
  const objectStore = db.createObjectStore('messages', { keyPath: 'id', autoIncrement: true });

  // Добавить сообщение в пространство хранилища объектов
  const message = { text: 'Hello, World!' };
  const addRequest = objectStore.add(message);

  addRequest.onsuccess = function(event) {
    console.log('Сообщение было добавлено в IndexedDB');
  };

  addRequest.onerror = function(event) {
    console.error('Произошла ошибка при добавлении сообщения в IndexedDB');
  };

  // Все сообщения из пространства хранилища объектов Получить
  const getAllRequest = objectStore.getAll();

  getAllRequest.onsuccess = function(event) {
    const messages = event.target.result;
    console.log('Все сообщения:', messages);
  };

  getAllRequest.onerror = function(event) {
    console.error('Произошла ошибка при получении сообщения');
  };
};

// Произошла ошибка при открытии или создании библиотеки данных.
request.onerror = function(event) {
  console.error('Произошла ошибка при открытии/создании библиотеки данных');
};

// изменение версии библиотеки данных
request.onupgradeneeded = function(event) {
  const db = event.target.result;

  // Создайтеобъектхранилищекосмос
  const objectStore = db.createObjectStore('messages', { keyPath: 'id', autoIncrement: true });

  console.log('Версия данной библиотеки обновлена');
};

8: использовать хранилище на стороне сервера: необходимо будет предоставить общий доступ к изданным хранилищам на стороне сервера.,вкладка之间проходить与服务器进行коммуникация Приходить Получатьи обновленияданные。Можетиспользовать AJAX、WebSocket или Другие сетевые коммуникационные технологии для достижения взаимодействия с изданными серверами.

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

Метод использования локальной хранилища (например, LocalStorage, SessionStorage) или клиентской библиотеки данных (например, IndexedDB) является более прямым и быстрым и подходит для мелкомасштабного совместного использования данных и синхронизации состояния.

Это распространенные способы общения через кросс-таблицу Браузер. Какой метод выбрать, зависит от ваших потребностей и сценария.