Voici le iFrame en question.

Dans l'en-tête, j'ai le code jQuery suivant:

<script>

    $(function(){

        var iFrames = $('iframe');

        function iResize() {

            for (var i = 0, j = iFrames.length; i < j; i++) {
              iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
            }

            if ($.browser.safari || $.browser.opera) {

               iFrames.load(function(){
                   setTimeout(iResize, 0);
               });

               for (var i = 0, j = iFrames.length; i < j; i++) {
                    var iSource = iFrames[i].src;
                    iFrames[i].src = '';
                    iFrames[i].src = iSource;
               }

            } else {
               iFrames.load(function() {
                   this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
               });
            }

        });

</script>

L'embedded ressemble à ceci:

 <div id="appointy">

<iframe src="//hfxtutoring.appointy.com/?isGadget=1" class="iframe" scrolling="no" frameborder="0" allowtransparency="true" style="text-align: center; -webkit-overflow-scrolling: touch; overflow: auto;">
</iframe>

</div>

Et le CSS est le suivant:

/*  to ensure proper scrolling and overflow handling on mobile devices, put this styling in a div wrapper around the iframe because it's unreliable in css:   -webkit-overflow-scrolling: touch; overflow: auto; */

.iframe 
{
    border: none;
    width: 100%;
    margin-right: 10px;
    padding: 0;
    border: 1px
 }

Ce que je veux, c'est que l'iFrame soit redimensionné avec la hauteur du contenu, pas avec une hauteur définie. Je ne comprends pas bien comment le faire fonctionner comme cet exemple.

1
NictraSavios 6 mars 2016 à 23:59

4 réponses

Meilleure réponse

Vous pouvez essayer CSS. Voici mon codepen.

iframe {
  height: calc(100vh - 20px);
  width: calc(100vw - 40px);
}

J'ai ajouté la fonction calc afin de vous donner une idée de la façon de contrôler dynamiquement la taille de la hauteur / largeur.

2
Emzor 15 mars 2016 à 21:50

Gérer les iFrames est un problème vieux de 20 ans qui n'a toujours pas d'option native facile.

En regardant votre code, la fonction iResize () n'est pas appelée. Il dimensionnera également uniquement l'iFrame au chargement de la page, vous devez également détecter si le contenu change, ou si la fenêtre se redimensionne, etc., il existe environ 20 événements différents qui pourraient entraîner une modification de la taille du contenu.

Je voudrais également souligner que l'utilisation de offsetHeight n'inclura pas la hauteur et la marge de la balise body.

J'ai écrit une bibliothèque qui traite de la plupart des problèmes que présentent les iFrames et qui fait un travail décent pour garder une iFrame à la taille de votre contenu. Il fonctionne même sur plusieurs domaines avec des sites tiers si vous avez la possibilité d'ajouter JS à votre iFrame.

Vous pourriez trouver utile de résoudre ce problème et les autres problèmes que les iFrames vous causeront.

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

Si vous n'avez pas accès pour ajouter JS à l'iFrame, il n'est pas possible de le faire dans le navigateur en raison des fonctionnalités de protection de sécurité pour vous empêcher d'interférer avec le site distant. Si vous voulez comprendre comment mon projet se déplace, jetez un œil à l'API postMessage.

2
David Bradshaw 15 mars 2016 à 22:26

Avez-vous essayé d'ajouter allowfullscreen à l'iframe?

<iframe src="{URL}" {other params}  allowfullscreen></iframe>

Vous devrez peut-être également ajuster le CSS du div enveloppant.

1
Michael S 9 mars 2016 à 19:30

Vous ne pouvez pas faire ça, ça brise Internet. Si vous pouviez changer ou éditer le contenu de l'iframe, vous pourriez provoquer un chaos massif sur le site de rendez-vous. Ce genre de choses est empêché pour une bonne raison. Malheureusement, «changer ou modifier» signifie également faire quoi que ce soit concernant le contenu de l'iframe, y compris simplement l'interroger.

Ce serait du gâteau si vous pouviez activer CORS sur le site de rendez-vous et votre serveur. Cela vous permettrait d'exécuter un script pour obtenir la hauteur de la div défilable et vous pourriez simplement définir la hauteur de votre iframe à partir de là.

Sinon, vous ne pouvez pas faire ça. Vous ne pouvez tout simplement pas obtenir la hauteur du contenu dans l'iframe en raison des règles mises en œuvre contre les scripts intersites / d'origine croisée.

var y = $("iframe")
y.contents()

Toute action tentée sur l'iframe (en chrome) entraînera: jquery.min.js: 2 DOMException non interceptée: impossible de lire la propriété 'contentDocument' de 'HTMLIFrameElement': bloqué un cadre d'origine "http: //atlantictutoring.com "d'accéder à une trame d'origine croisée. (…)

Si votre application était un sous-domaine de nomination, vous pouvez également le faire, mais des règles ont été définies pour vous empêcher d'usurper un domaine différent. : /

L'utilisation de la console de développement de Chrome pour modifier manuellement le CSS à l'URL de rendez-vous révèle que la barre de défilement est une barre de défilement JS, il y a donc une toute autre charge de choses à gérer.

1
Erik 14 mars 2016 à 20:11