4

Em um mesmo agente de navegação tenho duas páginas ou duas guias de navegação:

  1. A página index.html que contém dois botões:
<button id="btn1">Botão B1</button>
<button id="btn2">Botão B2</button>
  1. A página página2.html que contém apenas um texto informativo:
<p>Botões pressionados em index.html:</p>

Ambas as paginas interagirão em mesma origem.

Quero saber qual a tecnologia client side usar e como fazer com que ao pressionar um dos botões na página index.html seja adicionado um parágrafo na página2.html informando qual dos botões fora pressionado na página index.html

inserir a descrição da imagem aqui

1

1 Resposta 1

3

Em navegadores modernos a API Broadcast Channel permite a comunicação bidirecional entre contextos de navegação em uma mesma origem. Dois contextos de navegação são considerados tendo a mesma origem se e somente quando o esquema, host, e porta coincidirem.
A API pode ser usada para detectar ações do usuário em outras guias dentro de uma mesma origem.

O construtor BroadcastChannel cria um novo objeto BroadcastChannel e o conecta ao canal subjacente. Como parâmetro do constructor é passado uma string representando o nome do canal onde existirá um único canal com este nome para todos os contextos de navegação com a mesma origem.

Ao criar um canal de comunicação, através objeto BroadcastChannel:

Importante: O exemplo abaixo não pode ser reproduzido usando Stack Snippets pois o site bloqueia terminantemente a abertura de janelas secundárias. Um exemplo funcional está disponível no Repl.it onde será necessário para o teste do exemplo a permissão de abertura de popups pelo navegador.

O exemplo é simples, são duas páginas de HTML a index.html e página2.html.
É carregada a página principal index.html e essa inicia abrindo um canal de comunicação chamado Canal1.
Em uma nova guia á aberta a página2.html. A página index.html registra dois eventos click cujo ao serem disparados enviam uma mensagem através do Canal1 identificando qual o botão foi pressionado.
A página página2.html se inscreve no Canal1 e regista um evento BroadcastChannel.onmessage que fica escutado Canal1 e informa qual o botão de index.html foi pressionado.

index.html

const bc = new BroadcastChannel('Canal1');          //Cria um canal de comunicação chamado 'Canal1'.
window.open("pagina2.html", '_blank').focus();      //Abre uma nova guia.
//Registra um evento click para o botão cujo o id é "btn1"...
document.getElementById("btn1")
.addEventListener("click", () => {
  bc.postMessage("Botão 1 clicado.");               //...Envia uma mensagem através do canal de comunicação.
});
//Registra um evento click para o botão cujo o id é "btn2"...
document.getElementById("btn2")
.addEventListener("click", () => {
  bc.postMessage("Botão 2 clicado.");              //...Envia uma mensagem através do canal de comunicação.
});
<button id="btn1">Botão B1</button>
<button id="btn2">Botão B2</button>

página2.html

const bc = new BroadcastChannel('Canal1');          //Se inscreve no canal de comunicação 'Canal1'.
//Registra uma escuta de evento...
bc.onmessage = (e) => {
  document.body.innerHTML += `<p>${e.data}</p>`;    //Atualiza o texto da página com a mensagem recebida.
}
Botões pressionados:
3
  • 1
    +1, foi bom ter separado a resposta da daquela pergunta, pois é um assunto que merecia ter uma pergunta com escopo mais claro e voltado só pra isso. Commented 29/06/2022 às 18:39
  • 1
    Como saber se está sendo criado ou se está se inscrevendo no canal de comunicação se as instruções são as mesmas? Commented 14/09/2022 às 17:29
  • @CypherPotato, é um canal de comunicação full duplex, ou seja os interlocutores se comunicam em ambas as direções. Então a mesma instrução(constructor) cria o canal de comunicação caso não exista um canal de comunicação com determinado nome, ou se conecta a ao canal cujo o nome já seja existente. Commented 14/09/2022 às 18:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .