Comment puis-je ajuster dynamiquement la hauteur de l'iframe tout en contournant la politique de même origine ?

Réglage dynamique de la hauteur des iframes

Lors de l'intégration de contenu provenant de sources externes via des iframes, il devient crucial de garantir un réglage correct de la hauteur. Cet article examine une solution qui contourne la politique de même origine, permettant aux iframes de se redimensionner automatiquement pour s'adapter à leur contenu.

Exploiter les bizarreries du navigateur pour contourner la politique de même origine

La clé réside dans l'exploitation d'une bizarrerie du navigateur qui permet à un domaine parent de communiquer avec une iframe, alors que l'iframe ne peut pas communiquer directement avec son parent. Cette hiérarchie de communication est illustrée ci-dessous :

Page	Can Communicate With
www.foo.com/home.html	N/A (parent)
www.bar.net/framed.html	www.foo.com/helper.html (child)
www.foo.com/helper.html	www.foo.com/home.html (parent)

Informations sur la hauteur de passage à l'aide d'arguments d'URL

Pour déterminer la hauteur de l'iframe, la page de contenu (www.bar.net/ framed.html) le calcule et définit l'attribut src d'une iframe d'assistance (située sur le même domaine que le parent) via un argument URL. L'iframe assistant transmet ensuite ces informations au parent, qui peut ajuster la hauteur de l'iframe en conséquence.

Implémentation du code

www.foo.com/home. html (Page parent) :

function resizeIframe(height) {
  // Adjust the iframe height with a slight margin
  document.getElementById('frame_name_here').height = parseInt(height) + 60;
}

www.bar.net/framed.html (Enfant Page):

function iframeResizePipe() {
  // Calculate and pass the height to the helper iframe
  var height = document.body.scrollHeight;
  var pipe = document.getElementById('helpframe');
  pipe.src = 'http://www.foo.com/helper.html?height=' + height + '&cacheb=' + Math.random();
}

www.foo.com/helper.html (Page d'aide):

function parentIframeResize() {
  // Extract the height from the URL argument
  var height = getParam('height');

  // Communicate the height to the parent page
  parent.parent.resizeIframe(height);
}

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!