Pop up qui ne fonctione pas dans MSIE: en utilisant la fonction addEventListener

Version imprimable

Bonjour,

Je fais un exercice pour qu'une popup s'affiche dans Firefox et MSIE.
Le popup ne s'affiche pas dans MSIE.

J'ai ce code javascript dans un fichier externe :demo.js :

Code:

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
 
//compatibilité MSIE ET FF
function addListener(element, basename, handler) {
  if(element.addEventListener)
      element.addEventListener(basename, handler, false);
    else if(element.attachEvent)
      element.attachEvent('on' + basename, handler) 
} //addListener()
 
function prepareLinks() {
 
  var links = document.getElementsByTagName("a");
  for (var i=0; i<links.length; i++) {
    if (links[i].getAttribute("class") == "popup") {
      links[i].onclick = function() {
        popUp(this.getAttribute("href"));
        return false;
      }//function
    } //if
  } //for
} //prepareLinks() 
 
 
function popUp(winURL) {
  window.open(winURL,"popup","width=320,height=3");
 
} 
 
addListener(window, 'load', prepareLinks);

dans le body de la page HTML :

Code:

1
2
<a href="http://www.example.com/" class="popup">Example</a> 
<a href="http://www.example.com/" class="popupre">Example2</a>

En cliquant sur le lien ayant pour class : popup; une popup doit s'afficher.

Cela fonctionne sous FF et non sous MSIE.

Voyez vous le problème.

Je soupçonne le this dans la fonction prepareLinks(), mais je trouve pas la solution.

Code:

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
 
<script type="text/javascript">
//compatibilité MSIE ET FF
function addListener(element, basename, handler) {
  if(element.addEventListener)
      element.addEventListener(basename, handler, false);
    else if(element.attachEvent)
      element.attachEvent('on' + basename, handler) 
} //addListener()
 
function prepareLinks() {
 
  var mylinks = document.getElementsByTagName("a");
  for (var i=0; i<mylinks.length; i++) {
    if (mylinks[i].className == "popup") {
      mylinks[i].onclick = function() {
      alert(this.href); return false;
       // popUp(this.getAttribute("href"));
 
      }//function
    } //if
  } //for
} //prepareLinks() 
 
addListener(window, 'load', prepareLinks); 
 
function popUp(winURL) {
  window.open(winURL,"popup","width=320,height=3");
 
} 
 
</script>
</head>
 
<body >
<a href="http://www.example.com/" class="popup">Example</a> 
<a href="http://www.example.com/" class="popupre">Example2</a>
</body>
 
</html>

Résolu

Citation:

Envoyé par SpaceFrog

Code:

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
 
<script type="text/javascript">
//compatibilité MSIE ET FF
function addListener(element, basename, handler) {
  if(element.addEventListener)
      element.addEventListener(basename, handler, false);
    else if(element.attachEvent)
      element.attachEvent('on' + basename, handler) 
} //addListener()
 
function prepareLinks() {
 
  var mylinks = document.getElementsByTagName("a");
  for (var i=0; i<mylinks.length; i++) {
    if (mylinks[i].className == "popup") {
      mylinks[i].onclick = function() {
      alert(this.href); return false;
       // popUp(this.getAttribute("href"));
 
      }//function
    } //if
  } //for
} //prepareLinks() 
 
addListener(window, 'load', prepareLinks); 
 
function popUp(winURL) {
  window.open(winURL,"popup","width=320,height=3");
 
} 
 
</script>
</head>
 
<body >
<a href="http://www.example.com/" class="popup">Example</a> 
<a href="http://www.example.com/" class="popupre">Example2</a>
</body>
 
</html>

Merci SpaceFrog,
:D: je débute dans le DOM
:resolu: