[Débutant] Popup avec javascript dans un fichier séparé

**Marco85** · 20/12/2006, 09h19

Bonjour à tous,

Je veux séparer le javascript du code xHTML. Par conséquent, j'ai créé un fichier .xhtml et un autre .js. Cependant, je n'arrive pas à ouvrir de popup.

Code xHTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="script.js"></script>
    </head>
 
   <body>
		<a href="#" id="popup"><img src="test.jpg" alt="test"></a>
   </body>
</html>

Code JavaScript :

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

document.getElementById('popup').onClick="window.open('image.jpg','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0');return(false)"

Comment faire ?

Merci d'avance,

Marco85

**dingoth** · 20/12/2006, 11h40

Dans ton code javascript, tu fais xxx.onClick = STRING alors qu'il faudrait faire

Code :

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

1
2
3
4
5
6
7
8
document.getElementById('popup').onClick=function(){
    window.open(
        'image.jpg',
        '_blank',
        'toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0'
      );
    return(false);
  };

Le code javascript se trouvant à l'intérieur de tes guillemets en html doit être enlevé de ceux-ci et placé dans une fonction. Regarde la différence entre ton code et le mien : le function() {...} n'est pas en rouge, car c'est du code Javascript. Tandis que chez toi, c'est en rouge parce que c'est considéré comme une chaîne de caractère.

**Marco85** · 20/12/2006, 13h24

Merci pour cette remarque très pertinente. Je suis vraiment un débutant (depuis ce matin ...) et je n'avais même pas remarqué.

Voici donc mon code actuel :

Code xHTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="script.js"></script>
    </head>
 
   <body>
		<a href="#" id="popup"><img src="test.jpg" alt="test"></a>
   </body>
</html>

Code JavaScript :

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

1
2
3
4
5
6
7
8
document.getElementById('popup').onClick=function(){
    window.open(
        'image.jpg',
        '_blank',
        'toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0'
      );
    return(false);
  };

Malheureusement, quand je clique sur le lien, rien ne s'ouvre. Comme j'utilise Firefox, le debugger me dit : document.getElementById("popup") has no properties. Je ne comprends pas trop ce que ça veut dire ni comment résoudre ce problème.

Quelqu'un peut-il éclairer ma lanterne sur cette erreur et sur la manière de la résoudre ?
Merci d'avance.

Marco85

**dingoth** · 20/12/2006, 13h35

Bon, ça, c'est plus complexe, effectivement... mais facilement soluble.

ton code javascript est exécuté pile au moment où il est chargé, et le document n'a peut-être pas encore chargé toute la page HTML.

Dans ce cas, il te suffit d'insérer ce code dans window.onload afin de demander que le code soit exécuté une fois que la page HTML sera entièrement chargée.

Code :

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

1
2
3
4
5
6
7
8
9
10
window.onload=function() {
  document.getElementById('popup').onClick=function(){
      window.open(
          'image.jpg',
          '_blank',
          'toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0'
        );
      return(false);
    };
};

**Marco85** · 20/12/2006, 14h38

Super ... merci dingoth pour la correction de cette erreur. Malheureusement, il ne se passe toujours rien. Je n'ai plus d'erreur mais rien ne s'ouvre, aucune popup. Pourtant, j'ai bien le curseur de type "main" sur mon image.

Qu'ai-je encore oublié ?

Merci encore ... et d'avance pour ton aide,

Marco85

**Marco85** · 20/12/2006, 15h57

Bon alors j'ai tout refait et tout changé ...

Voici mon code désormais :

Code xHTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="script.js"></script>
    </head>
 
   <body>
		<a href="#" onclick="PopupImage('image.jpg');"><img src="test.jpg" alt="test"></a>
   </body>
</html>

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
function PopupImage(image)
{
	window.open
	(
		image,
		'_blank',
		'toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0'
	);
}

J'ai fait une fonction comme ça ce sera réutilisable par plusieurs fichiers vu que j'aurais les mêmes options. Est-ce que c'est bien ? Est-ce que c'est la meilleure façon de faire les choses ?

D'autre part, j'aimerais modifier 2 choses :
- que la popup fasse exactement la taille de l'image affichée (sans passer ses dimensions en paramètres),
- qu'un clic sur l'image de cette popup ferme cette popup.

Est-ce possible en JavaScript ?

Merci d'avance de m'éclairer sur tous ces sujets.

Marco85

[Débutant] Popup avec javascript dans un fichier séparé

JavaScript

Vue hybride

Discussions similaires

Partager

Partager