Veuillez patienter, chargement en cours
x images tirées au sort parmi n photos du site. Série actualisée à chaque changement de page ou toutes les 5 minutes. Vous pouvez cliquez sur une image pour l'agrandir et voir une description.
|
Forum - Programmation php et html - SCROLLING vs OVERFLOW dans un IFRAME
Auteur |
Sujet |
monTdM [ Admin ]
17 messages
|
Sujet n°16 : SCROLLING vs OVERFLOW dans un IFRAME - posté le 01/08/2016 à 23h27, lu 109 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:none | important | évite d'avoir des bordures parasites dans l'iframe de la page principale |
width:1000px | important | permet 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:10000px | très important | permet 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 | optionnelles | ces 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 externe | site m'ayant permis de comprendre comment remplacer le scrolling |
page encapsulée | la page externe s'affichant avec un décalage |
iframe final | l'iframe résultat, sans ascenseur, centré sur le texte explicatif |
Si vous avez des commentaires, n'hésitez pas à vous exprimer
|
|
Membres : 20
Visiteur en ligne : 0
Records connectés :
Simultanés : 22
Sur 24h : 24
Vous pouvez également accéder à ce site en version allégée avec votre PDA. Pour cela, enregistrez ce lien dans les favoris de votre mobile.
|