Comment puis-je redimensionner dynamiquement une Iframe en fonction de la hauteur de son contenu sur tous les domaines ?

Redimensionner une Iframe en fonction de la hauteur du contenu

Lorsque vous travaillez avec des iframes pour afficher du contenu provenant d'autres domaines, il est possible d'ajuster leur hauteur pour l'adapter au contenu. être un défi en raison de la politique de même origine. Cette politique restreint la communication JavaScript entre les pages de différents domaines.

Solution :

Pour surmonter cette limitation, une approche en plusieurs étapes est nécessaire qui implique à la fois le contenu iframe et la page de cadrage.

1. Communication inter-domaines :

Étant donné que le contenu iframe et la page de cadrage se trouvent sur des domaines différents, la communication directe n'est pas possible. Cependant, un mécanisme de « pipe » peut être établi à l'aide d'une autre iframe.

2. Calcul de la hauteur et transmission des messages :

Lorsque le contenu iframe est chargé, il calcule sa hauteur et définit la source d'une iframe masquée sur la page de cadrage sur une page d'assistance sur le même domaine, en transmettant la hauteur calculée. comme argument dans l'URL.

3. Redimensionnement de la page d'assistance et du cadre parent :

La page d'assistance du même domaine reçoit la hauteur du contenu iframe et la communique au cadre parent, qui peut ensuite redimensionner l'iframe en conséquence.

Code :

Encadrement Page :

<script type="text/javascript">
  function resizeIframe(height) {
    document.getElementById('myIframe').height = height + 60;
  }
</script>
<iframe>

Contenu Iframe :

<script type="text/javascript">
  function setIframeHeight() {
    var height = document.body.scrollHeight;
    document.getElementById('iframeResizer').src = 'helper.com?height=' + height;
  }
</script>
<iframe>

Page d'aide :

<script type="text/javascript">
  function resizeParentIframe() {
    var height = getParam('height');
    parent.parent.resizeIframe(height);
  }
  function getParam(name) {
    var regex = new RegExp("[\?&]" + name + "=([^&amp;#]*)");
    var results = regex.exec(window.location.href);
    return results ? results[1] : "";
  }
</script>

Remarque :

Cette solution suppose que la politique de même origine permet la communication JavaScript entre le contenu iframe et la page d'assistance. Si ce n'est pas le cas, des mesures supplémentaires pourraient être nécessaires.

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!