Entête
Rechercher
Galerie photo
Veuillez patienter,
chargement en cours
Présentation
Webmaster
Lettre d'informations
Pour avoir des nouvelles de ce site, inscrivez-vous à notre
lettre d'informations
nb : pas besoin d'être membre pour vous inscrire
S'abonner
Se désabonner
Question anti-spam :
nb1   plus   nb2   egal

forum.gifForum - Programmation php et html - SCROLLING vs OVERFLOW dans un IFRAME


Accueil du Forum  >>  Programmation php et html  >>  SCROLLING vs OVERFLOW dans un IFRAME
Auteur Sujet
monTdM
[ Admin ]

avatar

17 messages
rang

présence

Voir le profil de monTdM
Sujet Sujet n°16 : SCROLLING vs OVERFLOW dans un IFRAME - posté 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

Zone membres

Votre pseudo :

Votre mot de passe :

[ Mot de passe perdu ? ]


[ Devenir membre ]

Info membres
Liste des membresMembres : 17

Visiteur en ligne :Visiteur en ligne : 0

Total visites :Total visites : cpt1cpt3cpt8cpt6cpt7
Records connectés :Records connectés :
puce1Simultanés : 18

le 30/11/2015 à 20:50

puce1Sur 24h : 24

le 18/11/2016 à 12:45

Version pour mobile
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.
Calendrier