Maison >interface Web >js tutoriel >Comment puis-je redimensionner dynamiquement un iFrame en fonction de son contenu inter-domaines ?

Comment puis-je redimensionner dynamiquement un iFrame en fonction de son contenu inter-domaines ?

Patricia Arquetteoriginal: 2024-12-30 10:26:101031parcourir

How Can I Dynamically Resize an iFrame Based on its Cross-Domain Content?

Redimensionner un iFrame en fonction du contenu : naviguer dans la communication inter-domaines

Comprendre le défi inter-domaines

Lors de l'affichage de contenu provenant de domaines externes dans des iFrames , la politique de même origine pose un défi dans le redimensionnement dynamique de ces iFrames pour s'adapter à leurs contenu.

Une stratégie de contournement

Une technique pour contourner la restriction inter-domaines consiste à exploiter une bizarrerie du navigateur qui permet la communication entre les pages dans des structures iFrame imbriquées. En substance :

Page parent (www.foo.com/home.html) Page enfant iframes (www.bar.com/framed.html).
Page enfant (www .bar.com/framed.html) page d'assistance iframes (www.foo.com/helper.html).

Cette structure permet la communication entre :

www.bar.com/framed.html et www.foo.com/helper.html (dans le même iFrame)
www.foo.com/home. html et www.foo.com/helper.html (sur le même domain)

Mise en œuvre

Dans www.foo.com/home.html :

<script>
  function resizeIframe(height) {
    document.getElementById("frame_name_here").height = parseInt(height) + 60;
  }
</script>
<iframe>

Dans www. bar.com/framed.html :

<body onload="iframeResizePipe()">
<iframe>

Dans www.foo.com/helper.html :

<body onload="parentIframeResize()">
<script>
  function parentIframeResize() {
    var height = getParam("height");
    parent.parent.resizeIframe(height);
  }

  function getParam(name) {
    var regex = new RegExp("[\?&]" + name + "=([^&]*)");
    var results = regex.exec(window.location.href);
    if (results == null) return "";
    else return results[1];
  }
</script>

Cette solution implique une communication via une iframe « helper » (www.foo.com/helper.html) qui réside sur le même domaine que la page parent et facilite les demandes de redimensionnement entre les iFrames enfant et parent.

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!

html for this iframe

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi mon code jQuery échoue-t-il avec l'erreur « $ n'est pas défini » ?Article suivant：Pourquoi mon code jQuery échoue-t-il avec l'erreur « $ n'est pas défini » ?

Articles Liés

Voir plus