J'ai récemment rencontré un besoin au travail. Le scénario est le suivant : la page h5 est intégrée dans la page PC en tant que module de prévisualisation. L'utilisateur peut effectuer certaines opérations sur la page PC, puis la page h5 apporte des modifications réactives pour obtenir l'effet de prévisualisation. .
La première chose qui vient à l'esprit ici est d'intégrer la page h5 dans la page Web du PC à l'aide d'une iframe, puis le PC envoie les données modifiées à l'iframe via la méthode postMessage. Le h5 intégré dans l'iframe reçoit les données via addEventListener. , puis apporte des modifications réactives aux données.
Voici un résumé de l'utilisation de postMessage. L'API est très simple :
otherWindow.postMessage(message, targetOrigin, [transfert]);
otherWindow est une référence à la fenêtre cible, qui est iframe.contentWindow dans le scénario actuel ;
message est le message envoyé. Avant Gecko 6.0, le message devait être une chaîne, mais les versions ultérieures peuvent envoyer l'objet directement sans le sérialiser vous-même ;
targetOrigin représente l'origine de la fenêtre cible et sa valeur peut être une chaîne * (indiquant illimité) ou un URI. Lors de l'envoi d'un message, si l'un des protocoles, adresses d'hôte ou ports de la fenêtre cible ne correspond pas à la valeur fournie par targetOrigin, le message ne sera pas envoyé uniquement si les trois correspondent complètement, le message sera envoyé ; Pour les données confidentielles, il est très important de définir l'origine de la fenêtre cible ;
Lorsque postMessage() est appelé, un événement de message est distribué à la fenêtre cible. Cette interface possède un événement de message, qui possède plusieurs propriétés importantes :
1.data : Comme son nom l'indique, c'est le message transmis
2.source : l'objet window qui envoie le message
3.origin : la source de la fenêtre de message (protocole + hôte + numéro de port)
De cette façon, nous pouvons recevoir des messages inter-domaines et nous pouvons également renvoyer des messages de la même manière.
Le transfert de paramètres facultatif est une chaîne d'objets transférables qui sont transmis avec le message. La propriété de ces objets sera transférée au destinataire du message et l'expéditeur n'en conservera plus la propriété.
Ensuite, lorsque iframe est initialisée, vous pouvez obtenir la référence à l'iframe et envoyer le message via le code suivant :
// Notez qu'il ne s'agit pas d'obtenir la référence dom de l'iframe, mais la référence de la fenêtre iframe const iframe = document.getElementById('myIFrame').contentWindow;iframe.postMessage('hello world', 'http:/ /votrehôte.com' );Dans une iframe, le message peut être reçu via le code suivant.
window.addEventListener('message', msgHandler, false);Lors de la réception, vous pouvez filtrer l'origine du message selon vos besoins pour éviter les attaques XSS provoquées par la réception de messages avec des noms de domaine illégaux.
Enfin, pour la réutilisation du code, l'envoi et la réception des messages sont encapsulés dans une classe, et l'API de type message est simulée, ce qui est très pratique à utiliser. Le code spécifique est le suivant :
exporter la classe par défaut Messager { constructor(win, targetOrigin) { this.win = win; this.targetOrigin = targetOrigin; this.actions = {}; => {if (!event.data || !event.data.type) { return; const type = event.data.type; (!this.actions[type]) { return console.warn(`${type} : écouteur manquant`); } this.actions[type](event.data.value } on = (type, cb) = > { this.actions[type] = cb; return this; } submit = (type, valeur) => { this.win.postMessage({ type, valeur }, this.targetOrigin); window.removeEventListener('message', this.handleMessageListener }});Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.