web-dev-qa-db-fra.com

Redimensionner l'iframe de plusieurs domaines

J'essaie de changer le paramètre de hauteur d'iframe au même px de la page en cours de chargement dans l'iframe. La page en cours de chargement dans l'iframe provient d'un autre domaine.

Différentes pages seront chargées à l'intérieur de l'iframe, ce qui modifiera la hauteur du contenu de l'iframe. Il me faudra donc saisir la hauteur du contenu de l'iframe et l'appliquer au paramètre iframe height.

Voici un exemple de ce dont je parle: http://jsfiddle.net/R7Yz9/3/

<div class="site"><a href="http://Amazon.com/" target="_top">Amazon </a></div>
<div class="site"><a href="http://cnn.com/" target="_top">Cnn </a></div>
<div class="site"><a href="http://wikipedia.org/" target="_top">Wikipedia </a></div>
<iframe id="source" src="http://Amazon.com/" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>

.

$(document).ready(function() {
    var iframe = $( "#source" );
    $( "a[target=_top]" ).click( function(){
        iframe.attr( "src", this.href );
        return false;
    }); 
});
javascriptjqueryhtmlcssiframe
29
user874185

Voici une petite bibliothèque qui résout tous les problèmes de dimensionnement des iFrames en fonction de leur contenu.

https://github.com/davidjbradshaw/iframe-resizer

Il traite le problème entre domaines à l'aide de l'API post-message et détecte également les modifications apportées au contenu de l'iFrame de différentes manières.

Fonctionne dans tous les navigateurs modernes et IE8 à partir de maintenant.

EDIT: Pour déterminer les hauteurs iframe interdomaines, vous devez également avoir le droit d'implémenter un script sur la page de l'iframe.

26
David Bradshaw

Ensemble crossdomain minimal que j'ai utilisé pour incorporer l'iframe unique intégrée dans une page.

Sur la page d’incorporation (contenant l’iframe):

<iframe frameborder="0" id="sizetracker" src="http://www.hurtta.com/Services/SizeTracker/DE" width="100%"></iframe>
<script type="text/javascript">
  // Create browser compatible event handler.
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
  // Listen for a message from the iframe.
  eventer(messageEvent, function(e) {
    if (isNaN(e.data)) return;

    // replace #sizetracker with what ever what ever iframe id you need
    document.getElementById('sizetracker').style.height = e.data + 'px';

  }, false);
</script>

Sur la page incorporée (iframe):

<script type="text/javascript">
function sendHeight()
{
    if(parent.postMessage)
    {
        // replace #wrapper with element that contains 
        // actual page content
        var height= document.getElementById('wrapper').offsetHeight;
        parent.postMessage(height, '*');
    }
}

// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen for a message from the iframe.
eventer(messageEvent, function(e) {

    if (isNaN(e.data)) return;

    sendHeight();

}, 
false);
</script>
7
MTJ

Vous devez également avoir accès au site que vous utiliserez pour iframing. J'ai trouvé la meilleure solution ici: https://Gist.github.com/MateuszFlisikowski/91ff99551dcd90971377

yourotherdomain.html

<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript'>
  // Size the parent iFrame
  function iframeResize() {
    var height = $('body').outerHeight(); // IMPORTANT: If body's height is set to 100% with CSS this will not work.
    parent.postMessage("resize::"+height,"*");
  }

  $(document).ready(function() {
    // Resize iframe
    setInterval(iframeResize, 1000);
  });
</script>

votre site web avec iframe

<iframe src='example.html' id='edh-iframe'></iframe>
<script type='text/javascript'>
  // Listen for messages sent from the iFrame
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

  eventer(messageEvent,function(e) {
    // If the message is a resize frame request
    if (e.data.indexOf('resize::') != -1) {
      var height = e.data.replace('resize::', '');
      document.getElementById('edh-iframe').style.height = height+'px';
    }
  } ,false);
</script>
2
Joy Picar

Vous obtenez une hauteur de contenu iframe, par exemple. comme ça:

document.getElementById('iframe-id').contentWindow.document.body.scrollHeight

METTRE À JOUR

Cependant, il pourrait y avoir des problèmes avec cross domain. Voici quelques sources montrant différentes approches:

http://css-tricks.com/cross-domain-iframe-resizing/

Comment obtenir la hauteur d'iframe cross domain

Redimensionner la hauteur de l'iframe en fonction de la hauteur du contenu

Redimensionnement d'un iframe en fonction du contenu

Récupère la valeur du champ de saisie dans une iframe

Note: ces derniers montrent comment accéder à un champ mais le principe est le même pour accéder à une taille

2
LGSon

Si vous avez le droit de manipuler le code du site que vous chargez, voici une méthode complète pour mettre à jour la hauteur du conteneur iframe chaque fois que la hauteur du contenu encadré change.

Ajoutez le code suivant aux pages que vous chargez (peut-être dans un en-tête). Ce code envoie un message contenant la hauteur du conteneur HTML chaque fois que le DOM est mis à jour (si vous chargez paresseux) ou que la fenêtre est redimensionnée (lorsque l'utilisateur modifie le navigateur).

window.addEventListener("load", function(){
    if(window.self === window.top) return; // if w.self === w.top, we are not in an iframe 
    send_height_to_parent_function = function(){
        var height = document.getElementsByTagName("html")[0].clientHeight;
        //console.log("Sending height as " + height + "px");
        parent.postMessage({"height" : height }, "*");
    }
    // send message to parent about height updates
    send_height_to_parent_function(); //whenever the page is loaded
    window.addEventListener("resize", send_height_to_parent_function); // whenever the page is resized
    var observer = new MutationObserver(send_height_to_parent_function);           // whenever DOM changes PT1
    var config = { attributes: true, childList: true, characterData: true, subtree:true}; // PT2
    observer.observe(window.document, config);                                            // PT3 
});

Ajoutez le code suivant à la page sur laquelle l'iframe est stocké. Cela mettra à jour la hauteur de l'iframe, étant donné que le message provenait de la page chargée par l'iframe.

<script>
window.addEventListener("message", function(e){
    var this_frame = document.getElementById("healthy_behavior_iframe");
    if (this_frame.contentWindow === e.source) {
        this_frame.height = e.data.height + "px";
        this_frame.style.height = e.data.height + "px";
    }
})
</script>
0
Ulad Kasach

En javascript, il n'y a pas d'options pour trouver la hauteur d'un iframe hauteur entre domaines, mais vous pouvez faire quelque chose comme ceci avec l'aide d'une programmation côté serveur. J'ai utilisé PHP pour cet exemple

<code>
    <?php
$output = file_get_contents('http://yourdomain.com');
?>
<div id='iframediv'>
    <?php echo $output; ?>
</div>

<iframe style='display:none' id='iframe' src="http://yourdomain.com" width="100%" marginwidth="0" height="100%" marginheight="0" align="top" scrolling="auto" frameborder="0" hspace="0" vspace="0"> </iframe>

<script>
if(window.attachEvent) {
    window.attachEvent('onload', iframeResizer);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            iframeResizer(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = iframeResizer;
    }
}
   function iframeResizer(){
        var result = document.getElementById("iframediv").offsetHeight;

        document.getElementById("iframe").style.height = result;
        document.getElementById("iframediv").style.display = 'none';
        document.getElementById("iframe").style.display = 'inline';
    }
</script>
</code>
0
Santhosh Fernando