Maison >interface Web >tutoriel CSS >Comment puis-je redimensionner une Iframe d'un domaine différent à l'aide de postMessage ?
Comment puis-je redimensionner une Iframe d'un domaine différent à l'aide de postMessage ?
- Mary-Kate Olsenoriginal
- 2024-12-05 18:39:10221parcourir
Redimensionner une iframe à partir d'un domaine différent à l'aide de postMessage
Les tentatives de redimensionnement d'une iframe à partir d'un domaine différent peuvent être une tâche difficile. Bien que l'utilisation d'easyXDM constitue une solution de secours efficace pour les pages non conformes à HTML5, il existe des solutions alternatives qui méritent d'être envisagées.
L'une de ces solutions consiste à utiliser postMessage. Cette méthode consiste à transmettre la hauteur de la page enfant à la page parent, qui ajuste ensuite la hauteur de l'iframe en conséquence.
Détails de mise en œuvre
Page enfant
- Calculez la hauteur de la page enfant en utilisant document.getElementById('element_id).scrollHeight.
- Publiez la hauteur sur la page parent en utilisant parent.postMessage(actual_height,"*");. L'astérisque permet de publier sur n'importe quelle iframe parent, quel que soit le domaine.
<script>
function adjust_iframe_height(){
var actual_height = document.getElementById('element_id').scrollHeight;
parent.postMessage(actual_height,"*");
//* allows this to post to any parent iframe regardless of domain
}
</script>
<body onload="adjust_iframe_height();">
//call the function above after the content of the child loads
</body>
Page parent
- Ajoutez un écouteur d'événement à la fenêtre parent pour recevoir le message de la page enfant. Remplacez iframe_id par votre identifiant iframe.
- Mettez à jour la hauteur de l'iframe en fonction de la hauteur reçue.
<script>
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
eventer(messageEvent,function(e) {
console.log('parent received message!: ',e.data);
document.getElementById('iframe_id').height = e.data + 'px';
},false);
</script>
Avantages de l'utilisation de postMessage
- Communication inter-domaines : postMessage permet la communication entre différents domaines, ce qui le rend adapté à redimensionner les iframes d'une origine différente.
- Calcul de la hauteur : La page enfant calcule avec précision sa hauteur et la transmet à la page parent, garantissant ainsi un redimensionnement correct de l'iframe.
- Simplicité : La mise en œuvre est simple et nécessite des modifications minimales du code.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!