Recentemente, encontrei uma necessidade no trabalho. O cenário é: a página h5 está incorporada na página do PC como um módulo de visualização. O usuário pode realizar algumas operações na página do PC e, em seguida, a página h5 faz alterações responsivas para obter o efeito de visualização. .
A primeira coisa que vem à mente aqui é incorporar a página h5 na página web do pc usando um iframe, e então o pc envia os dados alterados para o iframe através do método postMessage. O h5 embutido no iframe recebe os dados através de addEventListener. e, em seguida, faz alterações responsivas nos dados.
Aqui está um resumo do uso do postMessage. A API é muito simples:
otherWindow.postMessage(mensagem, targetOrigin, [transferência]);
otherWindow é uma referência à janela de destino, que é iframe.contentWindow no cenário atual;
message é a mensagem enviada Antes do Gecko 6.0, a mensagem deve ser uma string, mas versões posteriores podem enviar o objeto diretamente sem serializá-lo você mesmo;
targetOrigin representa a origem da janela de destino e seu valor pode ser uma string * (indicando ilimitado) ou um URI. Ao enviar uma mensagem, se algum protocolo, endereço de host ou porta da janela de destino não corresponder ao valor fornecido por targetOrigin, a mensagem não será enviada somente se os três corresponderem completamente, a mensagem será enviada; Para dados confidenciais, é muito importante definir a origem da janela de destino;
Quando postMessage() é chamado, um evento de mensagem é enviado para a janela de destino. Esta interface possui um evento de mensagem, que possui várias propriedades importantes:
1.data: Como o nome sugere, é a mensagem passada
2.source: o objeto janela que envia a mensagem
3.origin: a origem da janela de mensagem (protocolo + host + número da porta)
Dessa forma, podemos receber mensagens entre domínios e também enviar mensagens de volta de maneira semelhante.
O parâmetro opcional transfer é uma sequência de objetos transferíveis que são passados junto com a mensagem. A propriedade desses objetos será transferida para o destinatário da mensagem e o remetente não manterá mais a propriedade.
Então, quando iframe for inicializado, você pode obter a referência ao iframe e enviar a mensagem através do seguinte código:
// Observe que isso não é para obter a referência dom do iframe, mas a referência da janela do iframe const iframe = document.getElementById('myIFrame').contentWindow;iframe.postMessage('hello world', 'http:/ /seuhost.com');Em um iframe, a mensagem pode ser recebida através do código a seguir.
window.addEventListener('mensagem', msgHandler, false);Ao receber, você pode filtrar a origem da mensagem conforme necessário para evitar ataques XSS causados pelo recebimento de mensagens com nomes de domínio ilegais.
Finalmente, para reutilização de código, o envio e recebimento de mensagens são encapsulados em uma classe e a API do tipo de mensagem é simulada, o que é muito conveniente de usar. O código específico é o seguinte:
exportar classe padrão Messager { construtor (win, targetOrigin) { this.win = win; this.targetOrigin = targetOrigin; => { if (!event.data || !event.data.type) { return } const type = event.data.type; (!this.actions[type]) { return console.warn(`${type}: ouvinte ausente` } this.actions[type](event.data.value } on = (type, cb) = > { this.actions[type] = cb; retornar isto } emit = (tipo, valor) => { this.win.postMessage({ tipo, valor }, this.targetOrigin retornar isto); window.removeEventListener('mensagem', this.handleMessageListener }}O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.