Redimensionner dynamiquement une IFRAME

**Yepazix** · 03/02/2020, 11h56

Bonjour,

Ce post est un peu la suite d'un autre post que j'ai fait au sujet de iframe.
J'ai utilisé Iframe (et un peu include aussi) pour intégrer un mini site Web dans une page wordpress (visible ici : https://www.imagiscene.com/agenda/).

Ca fonctionne très bien sauf que je ne comprends pas comment se comporte Height.

Le code dans ma page Wordpress est le suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 <head>
    <style>
        #imgEtire{
    height : 100em;
    border : 300 px solide #CCC;
    Width : 100%;
    min-width : 20em;
}
</style>
</head>
<body>
   <iframe id="imgEtire" sandbox src="https://www.espaceimagi.com/_agenda_/agenda.php" alt=""> </iframe> 
</body>

Avec la valeur dans Height ont devrait donc pouvoir définir la taille du frame.

Si j'indique une valeur en em ou en pt ça fonctionne nickel, plus la valeur est grande, plus le frame est "long". Logique.
Par contre en % ça ne fonctionne pas ! Quelle que soit la valeur indiquée je n'ai qu'une toute petite fenêtre.
J'ai essayé aussi des trucs comme auto ou inherit mais la aussi la frame reste petite.

Moi ce que je voudrais c'est que la frame fasse la taille de son origine.
--> S'il y a 2 évent's qu'elle soit toute courte et s'il y en a 50 qu'elle soit longue assez pour voir les 50 éléments et bien sur sans ascenseur.

Mais est ce possible ?

Merci d'avance de votre aide.

**Yepazix** · 06/02/2020, 01h04

La question est-elle débile ? Ou alors c'est impossible ?

**NoSmoking** · 06/02/2020, 08h58

Bonjour,
une réponse partielle t'a été fournie dans ton autre discussion, avec lien à suivre, et notamment

Point #4

En ce qui concerne Height, si je met des valeurs pt ou em ça fonctionne, plus la valeur est grande plus la fenêtre est longue... logique. Par contre si je met 100% je n'ai en hauteur que l'équivalent d'un évent.

Par défaut les <iframe> prennent comme valeurs height:150px et width:300px c'est comme cela sur tous les navigateurs, si l'on ne redéfinie pas l'une d'elles c'est donc la valeur par défaut qui est prise en compte.

concernant la valeur exprimée en pourcentage, ce pourcentage est calculé par rapport aux dimensions du bloc conteneur qu'il faut donc dimensionner.

**Yepazix** · 06/02/2020, 12h06

Oui, ça j'ai compris :-).
Enfin je crois...
J'ai voulu faire un %tage en croyant que ça me donnerait un %tage de ma "source" --> 100% = toute ma source.
Mais en fait ça me donner un %tage de ma destination.
C'est bien ça ?

Mais du coup mon problème reste entier.
Est ce que je sais d'une manière ou d'une autre "étirer" ma zone de destination en fonction de la taille de ma zone de source ?

Merci de ton aide.

**NoSmoking** · 06/02/2020, 17h38

Est ce que je sais d'une manière ou d'une autre "étirer" ma zone de destination en fonction de la taille de ma zone de source ?

La réponse à ta question est non puisque tu la poses

Plus sérieusement si tu veux adapter la hauteur de ton <iframe> à son contenu il te faut passer par du JavaScript à condition que les deux pages soient sur le même domaine, mais pas en triturant le CSS, on pourra en reparler.

Pourquoi ne pas passer par un include voir une « page template » qui sont des solutions plus robuste et propre ?

**Yepazix** · 07/02/2020, 03h21

Parce que insérer du HTML dans une page WP c'est niveau 1ère primaire.
Tu met le widget HTML sur la page la ou tu veux, tu met ton HTML dans la case correspondante et c'est fini :-)

Un include c'est déjà "un peu plus compliqué" si l'approche est la même, à savoir utiliser un add ou un widget pour Wordpress dans une page Elementor.
J'ai essayé et j'ai été confronté aux même problèmes qu'avec le iframe.

Je suppose qu'il reste donc la solution de la page template.
Elle me fait peur pour deux raisons.

1/ Je ne suis pas sur du tout d'avoir le niveau pour faire une page template.
2/ Il faudrait que je puisse fournir quelque chose de simple à mettre en place.
--> Pour mon site www.imagiscene.be pas de souci, je peux faire tout ce que je veux, mais en fait c'est plus en test qu'autre chose.
Au final le but est de fournir une solution testée et portable sur un autre site WP qui pourrait utiliser le même principe mais en utilisant son Layout de base.

Maintenant il y a peut être encore d'autres approches aux quelles je n'ai pas pensé ?

**Yepazix** · 10/02/2020, 10h42

Bon ben il ne me reste qu'a laisser tomber alors

**NoSmoking** · 11/02/2020, 10h24

Envoyé par NoSmoking

il te faut passer par du JavaScript à condition que les deux pages soient sur le même domaine, mais pas en triturant le CSS, on pourra en reparler.

Donc on en reparle et on traite cela via du JavaScript

Par défaut les éléments <iframe> sont dimensionnés à 300 px en largeur et 150 px en hauteur.

Le but est de pouvoir redimensionner dynamiquement une iframe en fonction de son contenu.

Important :
Le redimensionnement s'appliquera uniquement si le document conteneur et le document contenu appartiennent au même domaine.

HTML utilisé pour l'iframe :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<body>
  <h1>Contenu de l'iframe</h1>
  <iframe src="iframe-contenu.html"></iframe>
</body>

CSS appliqué à l'iframe :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
iframe {
  display: block;
  border: none;
  width: 90%;       /* à définir et à ajuster */
  margin: auto;
}

L'iframe est uniquement définie en largeur, sa hauteur s'adaptera à la hauteur de son contenu via le script ci-dessous.

Le script est à placer en fin de la page mère, celle contenant l'iframe :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
/**
 * Gestion dimensionnement en hauteur de l'iframe
 */
const oFrame = document.querySelector("iframe");
// fonction appelée par la page enfant, le document contenu dans l'iframe
function ajusteIframe() {
  resizeIframe.call(oFrame);
}
// fonction de redimensionnement de l'iframe
function resizeIframe() {
  const iframe = this;
  const doc = iframe.contentDocument;
  if (doc && doc.documentElement) {
    iframe.style.height = doc.documentElement.offsetHeight + "px";
  }
}
// appel du redimensionnement une fois le contenu de l'iframe chargé
oFrame.addEventListener("load", resizeIframe);
</script>

Cela n'est cependant pas suffisant, il faut également prévoir le cas du redimensionnement de la page mère, donc éventuellement de la page enfant, et pour cela il faut inclure le script suivant en fin de la page enfant, celle contenue dans l'iframe :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<script>
/**
 * Sur le resize du document appel de la fonction
 * de redimensionnement de l'iframe conteneur
 */
window.addEventListener("resize", function () {
  const parentIframe = window.parent.frames;
  if (parentIframe && parentIframe.ajusteIframe) {
    parentIframe.ajusteIframe()
  }
});
</script>

Voilà pour le principe à mettre en place.

Exemple en ligne : Redimensionnement iframe

A toi de jouer maintenant !

PS : je déplace vers le forum JavaScript

**Yepazix** · 12/02/2020, 13h21

Merci BEAUCOUP pour ces explications.
Je suis en vacances jusque dimanche mais je vais essayer ça à mon retour....par curiosité....
Car dans les faits c'est mort à cause de : Important : Le redimensionnement s'appliquera uniquement si le document conteneur et le document contenu appartiennent au même domaine.
Vu que ce ne sont pas les mêmes domaines.... ca n'ira pas.

J'expérimente en // une autre solution.
Dis moi ce que tu en pense.

Ma page ici : http://www.espaceimagi.be/_agenda_/agenda.php
C'est du PHP.

Les pages Wordpres c'est du PHP aussi.

Donc je me dis qu'au lieu de faire un iframe, je pourrais intégrer mon code qui "extrait" les données de l'excel et les affiche, dans un modèle de page Wordpress qui respecterait le layout de départ.
C'est un peu là que je bloque. Comment faire pour inclure un bloc dans une seule page tout en gardant à cette page la capacité d'être un canevas Wordpress ?
Ce que je veux c'est évidement que quand le thème se met à jour il ne faut pas que je perde l'agenda.
Je sais que c'est possible , je l'ai déjà fait !
Mais impossible de retrouver mes notes surement bien rangées sur un post-it derrière un meuble....
Mais bon là je me rends compte que ce n'est peut être pas le bon endroit .... je vais allez sur le forum wp :-)
En tous cas un ENORME merci pour le temps passé à me répondre :-)

Redimensionner dynamiquement une IFRAME

JavaScript

Discussions similaires

Partager

Partager