Postmessage HTML5 resuelve soluciones de transmisión de mensajes cruzados y de viento cruzado

Por lo general, al hacer desarrollo web, hay varios problemas que a menudo se encuentran además de los clientes y la transmisión del servidor.

1. Transmisión de datos de páginas y nuevas ventanas abiertas

2. Mensajes entre múltiples ventanas

3. Página y transmisión de mensajes de iframe anidados

4. Transmisión de datos de dominio cruzado de los tres problemas anteriores

Postmessage ()

Estos problemas tienen algunas soluciones, pero la API de mensajes introducida por HTML5 puede ser más conveniente, efectivo y resuelto de forma segura. El método PostMessage () permite que los scripts de diferentes fuentes usen métodos asíncronos para una comunicación limitada, lo que puede realizar archivos de texto cruzado, mensajes de viento múltiple y dominio cruzado.

El método postmessage (datos, origen) acepta dos parámetros

1. Datos: los datos que se pasarán, la especificación HTML5 mencionó que el parámetro puede ser cualquier tipo básico o objeto replicable de JavaScript, pero no todos los navegadores han hecho esto. Necesita usar el método JSON.Stringify () para serializar el parámetro del objeto al pasar los parámetros.

2.origin: parámetros de cadena, indique la fuente de la ventana de destino, protocolo+host+número de puerto [+url], se ignorará la URL, por lo que puede escribirlo. Solo haga que el mensaje pase a la ventana especificada. a/.

http://test.com/index.html

 <Div Style = Ancho: 200px; src = http://lslib.com/lslib.html> </aframe> </div>

Podemos pasar el mensaje a la página de iframe de dominio cruzado http: //lslib.html en el dominio cruzado si http://test.com/index.html transmite mensajes

 Window.Onload = function () {Window.frames [0] .PostMessage ('getColor', 'http://lslib.com');}

Mensaje de recepción

La página anterior Test.com envió un mensaje a LSLIB.com, así que cómo recibir mensajes en la página LSLIB.com y monitorear el evento de mensaje del evento de mensajes de Window.

http://lslib.com/lslib.html

 Window.adDeventListener ('Mensaje', function (e) {if (e.source! = Window.Parent) return; var color = contenedor.style.backgroundcolor; window.parent. Postmessage (color, '*');}, FALSO;

De esta manera, podemos recibir el mensaje pasado por cualquier ventana.

Hay varios atributos importantes

1. Datos: Como su nombre indica, es el mensaje que se transmite

2.surce: Objeto de ventana para enviar mensajes

3.origin: fuente de enviar una ventana de mensaje (protocolo+host+número de puerto)

De esta manera, puede recibir mensajes de dominio cruzado.

Demostración simple

En este ejemplo, el DIV de la izquierda cambiará de acuerdo con el cambio de color del DIV a la derecha a la derecha

 <! <div id = color> color color </div> </div> <div> <iframe id = child src = http://lslib.com/lslib.html> </div> </div> <script type = Text/javascript> window.onload = function () {window.frames [0] .postMessage ('getColor', 'http://lslib.com');} window.addd eventListener ('mensaje', function (e) {var color = e.data;

 <! = Container OnClick = Changecolor (); ); ;}, falso); , 0) ';} else {color =' rgb (204,102,0) ';} contenedor.style.backgroundcolor = color; com/lslib.html

Cuando la página se carga en el ejemplo, la página de inicio envía la solicitud 'getColor' a iframe (los parámetros no son prácticos)

 Window.Onload = function () {Window.frames [0] .PostMessage ('getColor', 'http://lslib.com');}

Iframe recibe el mensaje y envía el color actual a la página principal

 Window.adDeventListener ('Mensaje', function (e) {if (e.source! = Window.Parent) return; var color = contenedor.style.backgroundcolor; window.parent. Postmessage (color, '*');}, FALSO;

Reciba mensajes en la página de inicio, cambie su propio color Div

 Window.AdDeventListener ('Mensaje', function (e) {var color = e.data; document.getElementById ('color'). Style.backgroundcolor = color;);

Al hacer clic en iframe, activar su método de cambio de color, envíe el último color a la página principal

 function changeColor () {var color = contenedor.style.backgroundcolor; RGB (204,102,0) ';} Container.Style.BackgroundColor = Color;

La página de inicio todavía usa el programa que solo escuchaba el evento de mensajes para manejar su propia decoloración

 Window.AdDeventListener ('Mensaje', function (e) {var color = e.data; document.getElementById ('color'). Style.backgroundcolor = color;);

por fin

El uso simple resuelve el gran problema. La compatibilidad del navegador de SO se ha convertido en un problema que IE ha comenzado. Esencia Esencia Sin embargo, la buena noticia es como LocalStorage. También determinó si admite AddEventListener.

Lo anterior es todo el contenido de este artículo.