faire en sorte que iframe height soit dynamique en fonction du contenu contenu dans JQUERY / Javascript

Question

faire en sorte que iframe height soit dynamique en fonction du contenu contenu dans JQUERY / Javascript

Demandé el 6 de Février, 2012: Quand la question a-t-elle été
86518 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

chargement d'une page web aspx dans un iframe . Le contenu de l'Iframe peut être de plus de hauteur de l'iframe de la hauteur. L'iframe ne devrait pas avoir des barres de défilement.

J'ai un wrapper 'div' étiquette à l'intérieur de l'iframe qui est fondamentalement tout le contenu. J'ai écrit certains de Jquery pour faire le redimensionnement se produire :

$("#TB_window", window.parent.document).height($("body").height() + 50);

où 'TB_window' est la div dans laquelle le "Iframe" est contenue.

"corps" - le corps de la balise de la aspx dans l'iframe.

Ce script est attaché au contenu de l'iframe. je suis le TB_window élément de la page parent. alors que cela fonctionne très bien sur Chrome, mais la TB_window s'effondre dans firefox. Je suis vraiment confus, perdu sur les raisons de ce qui se passe.

Toute aide est très appréciée

Demandé el 6 de Février, 2012 par karry

Answer 1

5 Réponses

Answer 2

246voto

Aristos Points 40367

Vous pouvez récupérer la hauteur de l' IFRAMEs'contenu à l'aide de: contentWindow.document.body.scrollHeight

Après l' IFRAME est chargé, vous pouvez ensuite modifier la hauteur de la manière suivante:

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>

Puis, sur l' IFRAME balise, vous raccordez le gestionnaire comme ceci:

<iframe id="idIframe" onload="iframeLoaded()" ...

J'ai eu une situation il y a un moment où je en outre nécessaire d'appeler iframeLoaded de la IFRAME à la suite d'un formulaire de soumission s'est produite à l'intérieur. Vous pouvez accomplir cela en procédant comme suit au sein de l' IFRAME's des scripts de contenu:

parent.iframeLoaded();

Répondu el 6 de Février, 2012 par Aristos (40367 Points )

Answer 3

137voto

BlueFish Points 2667

Une légère amélioration de la réponse à Aristos...

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
  }
</script>

Alors déclarer dans votre iframe comme suit:

<iframe onload="resizeIframe(this)" ...

Il y a deux améliorations mineures:

Vous n'avez pas besoin d'obtenir de l'élément par l'entremise du document.getElementById - comme vous l'avez déjà dans le onload de rappel.
Il n'y a pas besoin de mettre la iframe.height = "" si vous allez à réaffecter dans le très à côté de l'instruction. Le faire réellement subit une surcharge comme vous avez affaire à un élément du DOM.

Répondu el 31 de Janvier, 2013 par BlueFish (2667 Points )

Answer 4

77voto

Marty Mulligan Points 156

J'ai trouvé que l'on a accepté la réponse ne suffit pas, puisque X-FRAME-OPTIONS: Autoriser-à Partir de n'est pas pris en charge dans safari ou chrome. Je suis allé avec une approche différente à la place, trouvé dans une présentation donnée par Ben Vinaigre de Disqus. L'idée est d'ajouter un écouteur d'événement à la fenêtre parent, puis à l'intérieur de l'iframe, l'utilisation de la fenêtre.postMessage pour envoyer un événement à la société mère pour lui dire de faire quelque chose (redimensionner l'iframe).

Ainsi, dans le document parent, ajouter un écouteur d'événement:

window.addEventListener('message', function(e) {
  var $iframe = jQuery("#myIframe");
  var eventName = e.data[0];
  var data = e.data[1];
  switch(eventName) {
    case 'setHeight':
      $iframe.height(data);
      break;
  }
}, false);

Et à l'intérieur de l'iframe, écrire une fonction pour poster le message:

function resize() {
  var height = document.getElementsByTagName("html")[0].scrollHeight;
  window.parent.postMessage(["setHeight", height], "*"); 
}

Enfin, à l'intérieur de l'iframe, ajouter un onLoad de la balise body pour déclencher la fonction de redimensionnement:

<body onLoad="resize();">

Répondu el 11 de Avril, 2014 par Marty Mulligan (156 Points )

Answer 5

6voto

David Bradshaw Points 271

Il existe quatre types de propriétés que vous pouvez regarder pour obtenir la hauteur du contenu dans une iFrame.

document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight

Malheureusement, ils peuvent tous donner des réponses différentes et ce sont incompatible entre les navigateurs. Si vous définissez le corps de la marge à 0 alors l' document.body.offsetHeight donne la meilleure réponse. Pour obtenir la valeur correcte essayer cette fonction, qui est pris de l' iframe-resizer bibliothèque qui s'occupe aussi de garder l'iFrame de la taille correcte lors de les changements de contenu,ou le navigateur est redimensionnée.

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        function getPixelValue(value) {
            var PIXEL = /^\d+(px)?$/i;

            if (PIXEL.test(value)) {
                return parseInt(value,base);
            }

            var 
                style = el.style.left,
                runtimeStyle = el.runtimeStyle.left;

            el.runtimeStyle.left = el.currentStyle.left;
            el.style.left = value || 0;
            value = el.style.pixelLeft;
            el.style.left = style;
            el.runtimeStyle.left = runtimeStyle;

            return value;
        }

        var 
            el = document.body,
            retVal = 0;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            retVal =  document.defaultView.getComputedStyle(el, null)[prop];
        } else {//IE8 & below
            retVal =  getPixelValue(el.currentStyle[prop]);
        } 

        return parseInt(retVal,10);
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}

Répondu el 22 de Mars, 2014 par David Bradshaw (271 Points )

Answer 6

-1voto

Michael L Watson Points 608

 $(document).height() // - $('body').offset().top

et / ou

 $(window).height()

comment obtenir la taille du corps en utilisant Jquery?

Essayez ceci pour trouver la hauteur du corps dans jQuery, espérez que cela vous aidera

if $("body").height() n'a pas de valeur si firebug c'est peut-être le problème

Répondu el 6 de Février, 2012 par Michael L Watson (608 Points )

faire en sorte que iframe height soit dynamique en fonction du contenu contenu dans JQUERY / Javascript

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

faire en sorte que iframe height soit dynamique en fonction du contenu contenu dans JQUERY / Javascript

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: