Cadre <iframe> qui ne marche pas correctement

**Elliot2.0** · 04/01/2026, 16h50

Bonjour,

Je suis en train de créer ma page web et pour cela, je dois afficher un cadre <iframe>, mais dès que ce dernier est chargé, quelque chose me redirige vers la page de l'<iframe>…
Je ne sais pas si cela est une erreur "classique" ou un paramètre mal paramétré, mais j'aimerais bien régler ce problème.

Voici mon code pour le moment :

Index.html :

Code :

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
<!DOCTYPE HTML PUPLIQUE >
<HTML lang='fr'>
    <HEAD>
        <title>Index.html</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="icon" href="img/Logo_1-1.jpg">
    </HEAD>
 
    <body>
        <div id="fondgris">
            <div id="bodypopup">
                <center>
                    <H2>Utilidation des cookies</H2><br>
                </center>
                <iframe id="cookie" src="text.html" height="10" width="10">ceci est le text dans le cadre</iframe>
            </div>
        </div>
        <!-- site -->

Text.html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>text.htm</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- long text-->
</body>
</html>

style.css :

Code css :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* body */
 
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 10000;
 
}
 
/* ids */
 
#menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background:url(img/bg_menu.gif) no-repeat;
    background-position:center;
    height: 40;
    width: 100%;
    text-align: center ;
    background-size: 100%;
    padding-top: 5;
}
 
#fondgris {
    background: #00000080;
    position: fixed;
    top: 0;
    left: 0;
    z-index:100;
    width: 100%;
    height: 100%;
}
 
#bodypopup {
    position: fixed;
    top: 2%;
    left: 5%;
    right: 5%;
    bottom: 5%;
    padding: 5;
    background: #ffffff;
}
 
/* styles */
 
.text {
    padding: 5;
}

**mathieu** · 04/01/2026, 18h18

il est souvent possible de remplacer ces balises frame qui peuvent poser des problème dans la navigation de votre site.
quelles sont les raisons de vouloir l'utiliser comme cela sur votre site ?

**casperweb** · 04/01/2026, 18h51

Bonsoir, je me pose également la même question que mathieu. Que souhaitez-vous faire avec une iframe.

Il y a des erreurs dans votre code que vous pouvez vérifier au validateur :
HTML => https://validator.w3.org/
CSS => https://jigsaw.w3.org/css-validator/

Il n'y a pas le mot "publique" dans le doctype. Le doctype du fichier Text.html est correct.
Virer moi de toute urgence cette vilaine balise <center>, elle est obsolète depuis 1999 (sans blague). C'est en CSS que l'on centre.
La balise <br> sert à créer des retours lignes dans une portion de texte, pas à créer des espacements entre les éléments. Pour ce faire vous avez les padding, margin, flexbox ou grid en CSS.

Les lignes 7, 20, 24, 43, et 50 de votre CSS manque d'unité. C'est quoi des choux, des pourcentages, des pixels, autre....

Dans le <head> il vous manque la meta charset.
Par convention, les balises s'écrivent en minuscule.

**Elliot2.0** · 04/01/2026, 19h40

Envoyé par mathieu

quelles sont les raisons de vouloir l'utiliser comme cela sur votre site ?

Je chèche à créé une fenêtre pop up avec du texte qui peut défiler et je me suis dit que d'utiliser un <iframe> pour crée une fenêtre que l'on peut défiler pouvait être pratique.

Et pour certaines erreurs dans mon code, c'est parce que c'est le code que j'utilisais quand j'ai commencé à apprendre le html, donc il y a forcément des erreurs et pour le css, en effet, je suis d'accord que c'est mieux de mettre des unités mais pareil, c'était quand j'ai commencé (pour la majorité).

**mathieu** · 04/01/2026, 20h05

vous pouvez faire un texte avec une barre de défilement en css.
essayez cet exemple, c'est bien cet effet que vous cherchez ?

Code :

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
21
22
23
24
25
26
27
<style>
 
.texte_avec_defilement
{
        overflow : auto; /* c'est cette règle css qui affiche les barres de défilement */
 
        margin : 2em;
        padding : 3em;
 
        text-align : justify;
 
        width : 30em;
        height : 15em;
 
        background : #FDD;
}
 
</style>
 
 
<div class="texte_avec_defilement">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a erat sit amet massa sodales egestas.</p>
 
	<p>Donec sit amet dictum tellus. Quisque condimentum ultrices mauris, at sollicitudin ligula gravida a.</p>
 
	<p>Etiam mattis lacus lobortis ante sollicitudin, vitae sagittis elit commodo. Proin vel feugiat urna. Curabitur luctus rutrum quam quis luctus. Ut tincidunt justo sit amet enim volutpat, lobortis porttitor libero aliquet. Sed malesuada odio lacus, luctus rhoncus risus auctor sit amet. In vehicula pretium arcu, nec rhoncus tortor pharetra a. Nulla accumsan ullamcorper ultricies. Pellentesque blandit in magna a malesuada. Praesent auctor risus eget enim vestibulum dictum. Proin faucibus ullamcorper neque, eu convallis elit viverra non. Morbi sit amet sodales felis. Nunc sodales interdum ligula, at efficitur turpis tempus at. Proin dapibus dolor vitae lectus pharetra luctus.</p>
</div>

**casperweb** · 04/01/2026, 20h23

Pour créer une popup cela ce passe en JavaScript avec window.open => https://www.toutjavascript.com/refer...indow.open.php
Mais bon nombre de navigateur bloque les popup. Si bien qu'on utilise des popin appelée également fenêtre modale. (Faite une recherche sur ce terme avec votre moteur de recherche favoris, vous y trouverez des exemples en pur CSS et d'autre avec JS).

Quelques exemples :
https://www.anysurfer.be/fr/document...ialogue-modale
https://jolicode.com/blog/une-fenetre-modale-accessible
https://developer.mozilla.org/fr/doc...lements/dialog

il y a actuellement l'attribut "popover" qui évite l'écriture du JS.
https://developer.mozilla.org/fr/doc...ibutes/popover

Cadre <iframe> qui ne marche pas correctement

HTML

Discussions similaires

Partager

Partager