Hauteur dynamique iframe externe

Sujet résolu

27 septembre 2019 à 12:08:29

Bonjour à tous,

Je souhaiterais adapter la hauteur d'une iframe venant d'un site externe pour éviter le scroll ou l'espace blanc en dessous mais je ne trouve pas la solution. J'ai cherché sur le forum mais aucune solution ne fonctionne ...

<div class="row-content" style="margin-top: 1em">
    <iframe id="haWidget" allowtransparency="true" scrolling="auto" src="https://......." style="width:100%; border:none;"></iframe>
</div>

Dans l'inspecteur d'éléments je vois bien le <html> de mon iframe à une height à 630px (par exemple). Cependant elle peut différer en fonction de son contenu donc je ne peux pas mettre une hauteur fixe.

Et null pour le deuxième console.log();

J'ai essayé plein de trucs mais rien ne fonctionne ...

Du coup j'aurais aimé avoir une solution pure JS ou jQuery me permettant de récupérer la hauteur d'une iframe et ainsi la passer dans le paramètre height de celle-ci, ne serait-ce qu'une piste à suivre...

Merci d'avance !

Damien.O

27 septembre 2019 à 12:35:45

Bonjour, pourquoi pas utiliser du css en forçant la hauteur de ton iframe plutôt ? Tu mets ton iframe dans une div nommée, puis tu forces la hauteur de ton iframe avec un !important, sans oublier le overflow-y: scroll, pour pouvoir scroll dans l'iframe si le contenu est plus long que ta hauteur.

Sinon, tu dois pouvoir récupérer la hauteur de ton contenu de l'iframe en utilisant $('#haWidget html').height(), à essayer. Ou regarde si tu as une classe dans l'iframe te permettant de l'utiliser et de récupérer la hauteur du contenu à l'intérieur, une fois le contenu de l'iframe chargé.

---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------

MaximeRose

27 septembre 2019 à 13:56:54

Bonjour Damien,

Je veux justement supprimer le scroll de l'iframe :/

En faisait un console.log($('#haWidget html').height(); j'ai null.

Quand j'ouvre l'inspecteur j'ai :

<iframe id="haWidget" [...]>
  #document
    <!doctype html>
    <html>
      <head>
        <meta [...]>
      </head>
      <body>
        Tout le contenu
      </body>
    </html>
</iframe>

J'ai essayé d'accéder à une des classes du body puis faire un .height() et ça me renvoie toujours null.

En faisait un console.log($("#haWidget")); j'ai tout ce qui concerne l'iframe :

m.fn.init [iframe#haWidget, context: document, selector: "#haWidget"]
  0: iframe#haWidget
    childElementcount: 0 
    childNodes: NodeList []
    children: HTMLCollection []
    clientHeight: 150
    clientWidth: 784
    height: ""
    offsetHeight: 156
    offsetTop: 96
    scrollHeight: 150
    scrolling: "auto"

150 c'est la taille par défaut de l'iframe ...

On voit que cet élément iframe n'a pas d'enfant du coup je vois pas trop comment je vais pouvoir accéder au contenu :/

tormod

28 septembre 2019 à 9:24:46

Salut

Et récupèrent la taille d'une div parente a ton ifram?

Ou encore avec $('#hawidget').offsetHeight

-
Edité par tormod 28 septembre 2019 à 9:33:01

si l'art du débogage est de traquer les erreurs alors la programmation est l'art de les créer

MaximeRose

11 octobre 2019 à 9:42:45

Pardon pour ma réponse tardive, j'avais complètement oublié ce sujet en passant à autre chose ...

En fait le soucis vient du cross-origin domain de l'iframe. J'ai essayé de chercher un peu partout on ne peut pas accéder aux éléments d'une iframe ne venant pas de notre domaine, ou alors il faut pouvoir modifier l'iframe source, sauf que je ne peux pas puisqu'il s'agit d'une iframe venant d'un site qui ne m'appartient pas.

C'est donc impossible je pense.