incubateur-ademe / nosgestesclimat-site

Estimez votre empreinte climat - le code du site
https://nosgestesclimat.fr
MIT License
71 stars 40 forks source link

Bug intégration iFrame.js #850

Closed BenFdesign closed 1 year ago

BenFdesign commented 1 year ago

Bonjour,

Je n'ai rien vu là dessus sur le git : J'ai un bug d'affichage de l'iFrame NGC, intégré dans un .html suivant la méthode que vous proposez ici.

Le contenu de l'iframe semble s'étendre à l'infini, ce qui rend impossible jusque l'accès au bouton "Faire le test" (le contenu du frame "fuit" la souris et se recalibre indéfiniment). En passant sur un affichage mobile, j'ai réussi à avancer un peu plus dans les questions, mais je me suis retrouvé bloqué à la question "Textiles" (bas de page blanc et tronqué, le bouton question suivante ne s'affiche pas). Le bug est présent sur Mozilla 110.0 (64 bits), et sur Chrome 110.0.5481.104. Il n'apparaît pas sur codesandbox. Tweeker le css pour rendre le défilement impossible n'a pas fonctionné à la hauteur de mes connaissances

À terme, mon objectif sera d'intégrer NGC dans l'iFrame d'un site associatif pour diffuser la comptabilité carbone dans des lieux d'intervention tout en récupérant automatiquement et anonymement les résultats par secteur, dans une base de données personnelle. Aussi, je ne peux pas me passer de la balise data-share-data="true", je ne sais pas si celle-ci fonctionnerait avec un iframe classique.

Voici le script d'intégration que j'utilise : <script id="nosgestesclimat" src="https://nosgestesclimat.fr/iframe.js" data-share-data="true"> </script>

Bonne journée !

Benjamin

laem commented 1 year ago

Bonjour @BenFdesign, merci pour le message, car c'est en effet un gros bug, qui n'est pas lié à la balise data-share-true (merci pour le retour sur votre utilisation au passage) ! Je m'y mets.

laem commented 1 year ago

Très liée à https://github.com/datagir/nosgestesclimat-site/issues/663

BenFdesign commented 1 year ago

Première solution trouvée en intégrant l'iframe sans passer par le script ngc.fr/iframe.js, qui ajoute automatiquement l'id iFrameResizer0 (qui semble être responsable du height qui s'étire à l'infini).

Maintenant, c'est plus des problématiques de responsivité sur mobile (le calculateur reste par exemple en mode 16/9 sur mobile, il faut réduire énormément avant d'avoir la version réduite sans les catégories "Le test, agir, mon profil" sur le côté). Ca ne me dérange pas pour l'instant, je pourrai trouver des solutions en bricolant.

EDIT : il semblerait que la méthode ci-dessous ne permette pas d'envoyer les résultats vers la console. J'attends donc vos mises à jour sur l'iframe fixé #851

Merci pour votre super travail ! Ben

<iframe
      src="https://nosgestesclimat.fr/?iframe&integratorUrl=file%3A%2F%2F%2FD%3A%2F0-%2520RQeT%2FLabo%2FComptaCarboneV1%2Fsrc%2Findex.html&shareData=true"
      style="border: medium none;
            width: 100%;
            display: block;
            margin: 10px auto;
            min-height: 700px;
            overflow: hidden;
            height: 800px;"
      allowfullscreen="true"
      webkitallowfullscreen="true"
      mozallowfullscreen="true"
      scrolling="no">
</iframe>
BenFdesign commented 1 year ago

Ah, je viens de voir le précédent message. C'est parfait, merci beaucoup !

laem commented 1 year ago

il semblerait que la méthode ci-dessous ne permette pas d'envoyer les résultats vers la console. J'attends donc vos mises à jour sur l'iframe fixé

MMMh a priori si, tant que l'option "shareData=true" est dans l'URL à la fin du test.

J'ai mis en ligne la version corrigée, qui assume maintenant une taille fixe. Qu'en penses-tu ?

BenFdesign commented 1 year ago

Une erreur de ma part alors sans doute, pour la tentative avec la balise