En el artículo anterior, habla sobre la estrategia homóloga del navegador, es decir, evitando que los métodos y atributos de los demás accedan a las páginas de los demás, y explican la solución a la solución a los problemas de dominio cruzado de las estrategias homólogas: agencia de subdominio. , JSONP, JSONP, CORS. Este artículo explicará en detalle la ventana HTML5.
Ventana HTML5.PostMessage APIHTML5 Window.PostMessage es una API de mensaje segura y basada en el evento.
Postmessage Enviar mensajeSe llama al método posterior a la ventana de origen que debe enviar un mensaje para enviar un mensaje.
Ventana de origenLa ventana de origen puede ser un objeto de ventana global o el siguiente tipo de ventana:
Iframe en la ventana del documento:
var iframe = document.getElementById ('my-iFrame');JavaScript Open Pop -Up Ventana:
var win = window.open ();
La ventana Padre de la ventana del documento actual:
var win = window.parent;
Abra la ventana del documento actual:
var win = window.opner ();
Después de encontrar el objeto de la ventana de origen, puede llamar a la API posterior al Message para enviar un mensaje a la ventana de destino:
`` `Win.PostMessage ('Hello', 'ttp: //jhssdemo.duapp.com/');` `` `` `` `` `` `` `La función postmessage recibe dos parámetros: el primero es el mensaje que se enviará, y el segundo es la fuente de la ventana de origen.
Nota: Solo cuando la fuente de la ventana de destino coincide con el valor del parámetro de origen que se pasa en la función posterior al Messaje, se puede recibir el mensaje.
Recibir mensajes posteriores a la presentaciónPara recibir mensajes de la ventana de origen anterior a través de PostMessage, solo necesita registrar el evento de mensaje en la ventana de destino y vincular la función de monitoreo de eventos para obtener el mensaje en el parámetro de función.
Window.onload = function () {var text = document.getElementById ('txt'); + e.origin); } if (window.adDeventListener) {// Registre el evento de mensaje para la ventana y vincule la función de monitoreo Window.adDeventRistener ('Mensaje', RecedeVemSg, False);} else {Window.at Tachevent ('Message', recibeVemSg) ;}};La función de monitoreo de eventos de mensaje recibe un parámetro, una instancia de objeto de evento, que tiene tres atributos:
Ventana de origen
<! # cccccc;} </style> </head> <body> <button id = btn> abrir </button> <button id = Enviar> Enviar </botón> <! jhssdemo.duapp.com/demo/h5_postmessage/win.html id = otrowin> </iframe> <br/> <br/> "<input type = button value = Enviar a child.com id = sendMessage/> <script> Window.onload = function () {var btn = document.getElementById ('btn'); Ventana a través de la ventana.open ('http: //jhssdemo.duapp .com/demo/h5_postmessage/win.html', 'popup'); // Enviar datos Document.getElementById (OTROWIN) .ContentWindow .PostMersage (OTROWIN) D (Mensaje). ;};Ventana de destino Win.html
<! ;} </style> </head> <body> <h1> La nueva ventana </h1> <div id = txt> </div> <script> window.onload = function () {var text = document. ('Txt'); (norigina: + e.origin); Para el evento de mensaje y vincule la ventana de la función de monitoreo. " revisarA través del estudio de este artículo, aprendí sobre el uso de la API posterior a la Message para usar HTML5 para comunicarse entre las ventanas, y también sé que puede usarse para realizar la comunicación moderna de dominio; Como IE7-, puede usarlo.
Lo anterior es todo el contenido de este artículo.