Comment puis-je redimensionner dynamiquement un iFrame en fonction de son contenu inter-domaines ?-js tutoriel-php.cn

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

Patricia Arquette

Libérer： 2024-12-30 10:26:10

original

1047 Les gens l'ont consulté

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>

Copier après la connexion

Dans www. bar.com/framed.html :

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

Copier après la connexion

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>

Copier après la connexion

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!