web-dev-qa-db-fra.com

Hauteur automatique pour Iframe contenant Google Doc incorporé/publié

J'ai un iframe avec un Google Doc publié. Le contenu de cette documentation est sujet à modification. Je souhaite donc ajuster automatiquement la hauteur de l'iframe en fonction de son contenu. J'ai trouvé des solutions à cela, mais elles nécessitent toutes un accès au document d'en-tête. Quelqu'un at-il une idée sur la façon de faire cela?

Vous pouvez voir un extrait du code que j'utilise ci-dessous:

#faq{
height: 800px;
overflow: hidden;
position: relative;
width: 660px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;
}

<div id="faq"><iframe id="faqif" src="https://docs.google.com/document/..../pub?embedded=true" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:900px;width:832px;position:absolute;top:-92px;left:-150px;right:0px;bottom:0px;z-index:0;" height="900px" width="832px"></iframe></div>
htmlcssiframegoogle-docsgoogle-drive-realtime-api
15
celalalt

Il n'y a aucun moyen actuel de le faire.

Toutefois, vous pouvez agrandir beaucoup la hauteur et masquer les bordures. Ainsi, la barre de défilement iframe n'apparaîtra pas et le document semblera faire partie de votre site Web.

5
Radius Kuntoro

Réponse simple ... vous ne pouvez pas

(Pardon)

La raison est due à la politique de domaine croisé } _ (_ { plus , info ) vous ne pouvez pas accéder au document enfant iframe et par conséquent vérifier sa height afin de redimensionner le iframe en conséquence, tout simplement

En informatique, la stratégie de même origine est un concept important du modèle de sécurité des applications Web . La politique autorise les scripts s'exécutant sur des pages Provenant du même site - une combinaison de modèle, nom d'hôte Et numéro de port - pour accéder au DOM de chacun sans restrictions particulières , mais empêche l'accès aux DOM sur différents sites .

source

[...]

Si vous n'avez pas le contrôle sur le site cadré, vous ne pouvez pas contourner La stratégie interdomaine.

source

Et si vous ne pouvez pas faire cela, vous ne pouvez pas faire ce que vous voulez, car il n'y a aucun moyen de déterminer la hauteur du document enfant.

Il semble que la raison pour laquelle vous voulez faire cela est liée à la conception. En tant que tel, vous voudrez peut-être examiner différentes manières de mettre en œuvre le contenu (iframe) au sein de votre site. La plus évidente étant que la restriction naturelle de hauteur est la hauteur de la fenêtre d'affichage du navigateur. Peut-être, par conséquent, rendre iframe 100% de la corps) hauteur? Bien que cela interfère avec votre conception s'il y a d'autres composants sur la page ... mais il existe des alternatives ... la iframe pourrait:

  1. Être aligné sur un côté de la page avec une hauteur de 100%

  2. Être placé dans une fenêtre contextuelle ou modale avec 100% hauteur/largeur

  3. Être contrôlé (JS) pour s’étirer avec la fenêtre parente, éventuellement avec une variable bottom

N'oubliez pas non plus que, puisqu'il s'agit d'une restriction globale sur ce type de contenu, les utilisateurs ne sont pas complètement habitués à le voir. Par conséquent, même s'il ne s'agit pas d'un choix de conception idéal, ce n'est pas nécessairement un choix qui va confondre/surprendre les visiteurs de votre site.

4
SW4

La mauvaise nouvelle est que la stratégie inter-domaines ne vous laissera pas faire cela de quelque manière que ce soit. J'ai passé quelques heures à essayer de contourner le problème, notamment:

  • Création d'un DIV parent et ajustement de l'iframe dessus
  • Essayer de redimensionner dynamiquement la DIV parent
  • Essayer de trouver une bibliothèque pour calculer la hauteur côté serveur
  • et beaucoup de googler.

La meilleure approche consiste à utiliser une bibliothèque disponible .

Téléchargez le fichier zip à partir de l'URL suivante et suivez les instructions d'installation simples qui y sont écrites.

http://davidjbradshaw.github.io/iframe-resizer/

Cela semble prometteur mais je ne suis pas en mesure de le tester moi-même. Jetez-y un coup d'œil et postez des commentaires si vous avez besoin d'aide.

1
Nj Subedi

j'avais le même problème. Voici la solution Vous devez définir le corps 100% 100% widht height Ensuite, le bloc d'affichage iframe, 100% width 100% vh Voici le code final. sry je ne sais pas comment mettre la balise de code xd

`body style =" margin: 0px; padding: 0px; width: 100%; height: 100%; " div style =" height: 100%; width: 100%; display: block; " iframe frameborder = "0" style = "hauteur: 100vh; largeur: 100%; affichage: bloc;" width = "100%" height = "100%" src = "https://docs.google.com/spreadsheets/d/1SizkrPE97j1TouBmohPjCj0ZB-MxYQtRSKotHyxT8Y8/edit#gid=0" /iframe Hz

0
Fernando
#faq{
position: relative;
width: 832px;
border-top: 1px solid #90C547;
border-bottom: 1px solid #90C547;
height: 100%
}
#faqif{}
.bgcolor_patch{position: absolute; right: 0; top:0; height: 100%; width: 20px; background: #fff; }

 $(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

<div id="faq"><iframe id="faqif" src="https://docs.google.com/document/..../pub?embedded=true" height="100%" width="832px" frameborder="0"></iframe>
<div class="bgcolor_patch"></div>
</div>
0
Akshay Mohite

La première réponse ici a fonctionné pour moi! Iframe plein écran d'une hauteur de 100%

    <body style="margin:0px;padding:0px;overflow:hidden">
      <iframe src="http://www.youraddress.com" frameborder="0"
        style="overflow:hidden;height:100%;width:100%" height="100%"
        width="100%">                       
      </iframe>
    </body>
0
Stedman Blake

Quelque chose de similaire a été demandé ici: Afficher toute la longueur du document pour intégrer un document google

La solution consiste à utiliser <embed> au lieu de <iframe> ou à GET votre document via une demande CORS et placez-le où vous voulez. Ce dernier vous permet également de styliser/modifier le contenu.

0
Alkis