Accueil du Forum  >>  Programmation php et html  >>  SCROLLING vs OVERFLOW dans un IFRAME

Sujet n°16 : SCROLLING vs OVERFLOW dans un IFRAME - par monTdM le 01/08/2016 à 23h27, lu 20 fois
Depuis plus de 2 ans je croyais que les navigateurs avaient tous un bug, conforté dans l'idée par de nombreux forums qui parlaient de ce problème en donnant tous le même type de réponses.
Mais 2 ans c'est long (pour parler uniquement de la période où j'ai moi-même découvert ce souci), on pourrait donc penser que les développeurs des navigateurs exagèrent un peu...
Mais je viens de me rendre compte qu'ils marchent tous très bien, c'est juste que personne (ou très peu) n'a compris l'astuce.

L'attribut "scrolling=no" pour masquer les ascenseurs dans un iframe est obsolète depuis le passage à html5 (donc depuis longtemps).
La solution préconisée est d'utiliser l'équivalent en CSS, à savoir "overflow:hidden". Mais cela ne marche pas.
Du coup toutes les solutions que j'ai trouvées proposent la même chose : mettre les deux et attendre que les navigateurs fonctionnent enfin ce qui permettra de retirer le "scrolling=no" devenu inutile.

On pouvait toujours attendre car en fait tout marche et sûrement depuis longtemps. C'est juste qu'on n'avait rien compris à la solution de substitution.

Et puis je suis tombé sur ce document. Et tout c'est éclairé (voir plus loin l'exemple).

Tout le monde met l'instruction CSS "overflow:hidden" au même endroit que le scrolling, à savoir dans la balise <iframe>.
Mais ce n'est pas ce qu'il faut faire : le CSS doit être appliqué à la page affichée dans l'iframe et non pas à l'iframe lui-même !!

* * * * * *


Explications avec un exemple concret qui affichera un iframe centré sur le texte qui m'a permis de tout comprendre. Imaginons que l'on veuille remplacer la balise obsolète :

Code

<iframe src="../pageafficheedansliframe.html" style="border-width:5px;width:600px;height:24px" scrolling="no"></iframe>


par son équivalent en html5. On est en fait déjà presque bon, il n'y a que l'attribut scrolling qui n'est pas conforme.

Et bien que cela ne tienne, supprimons-le ! Le nouveau code de l'iframe devient alors :

Code

<iframe src="../pageafficheedansliframe.html" style="border-width:5px;width:600px;height:24px"></iframe>


Deux cas sont alors possibles :

1er cas, vous êtes propriétaire du document source "pageafficheedansliframe.html".

La solution est alors toute simple. Dans le document "pageafficheedansliframe.html", vous rajoutez dans la balise <body> l'attribut style="overflow:hidden" :

Code

<body style="overflow:hidden">


Et ça marche ! Vous pouvez bien sûr ajuster l'aspect de tout cela en rajoutant d'autres styles dans le body, par exemple margin et padding.


2e cas, vous n'êtes pas propriétaire du document source "pageexterne.html" que vous souhaitez mettre dans votre iframe.

La solution : simuler que vous en êtes le maître en créant pour l'occasion la page "pageafficheedansliframe.html" qui contiendra les instructions suivantes :

Code

<!DOCTYPE html>
<html>
<head>
<title>Page encapsulée</title>
</head>
<body style="overflow:hidden">
<iframe id="ifr" src="../pageexterne.html" style="border:none;width:1000px;height:10000px;margin-left:-213px;margin-top:-3559px"></iframe>
</body>
</html>


Explications sur les 3 propriétés CSS importantes et sur les propriétés CSS optionnelles :
border:noneimportantévite d'avoir des bordures parasites dans l'iframe de la page principale
width:1000pximportantpermet d'avoir la page originale sur presque toute la largeur du navigateur (à ajuster si besoin). Vous pouvez mettre aussi 100% au lieu de 1000px, c'est une valeur qui fonctionne souvent bien
height:10000pxtrès importantpermet d'avoir toute la hauteur de la page externe sans qu'aucun ascenseur ne s'affiche. 10000px semble suffisamment grand mais vous pouvez ici aussi ajuster
margin-left:-213px
margin-top:-3559px
optionnellesces propriétés peuvent être supprimées dans la plupart des cas. Avec des valeurs négatives, elles permettent cependant de décaler la page externe pour mettre dans le coin supérieur gauche l'emplacement exact de la zone que vous voulez afficher dans votre iframe. Mais attention, les valeurs que j'ai mises sont valables uniquement pour Google Chrome et Opera. Pour les autres navigateurs (IE, Firefox et Safari) il faut rajouter un script disponible ci-dessous. Les valeurs sont à adapter en fonction de votre propre projet évidemment
Code

<script>
var x = document.getElementById("ifr");
if (/Trident/.test(navigator.userAgent)) x.style.marginTop = "-3587px"; // pour IE
else if (/Safari/.test(navigator.userAgent) && !/OPR/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) x.style.marginTop = "-3627px"; // pour Safari
else if (/Firefox/.test(navigator.userAgent)) x.style.marginTop = "-3610px"; // pour Firefox
</script>



L'exemple, entièrement conforme aux spécifications html5, est disponible ici :
la page externesite m'ayant permis de comprendre comment remplacer le scrolling
page encapsuléela page externe s'affichant avec un décalage
iframe finall'iframe résultat, sans ascenseur, centré sur le texte explicatif

Si vous avez des commentaires, n'hésitez pas à vous exprimer

[ Retour à la liste des sujets ]

upHautup


Site propulsé par GuppY - © 2004-2011 - Licence Libre CeCILL
Document généré en 0.015 seconde