IE9 surcharger window.close()

**Paul TOTH** · 25/07/2011, 12h27

Bonjour,

Dans le cadre d'un développement j'ai migré des fenêtres popup classiques (window.open) vers des popups internes en IFRAME

pour simplifier les choses j'ai surchargé le code window.close() par ce code

Code :

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

1
2
3
4
 
if (window.frameElement) {
  window.close = function() { close_iframe_popup() }
}

comme cela le code JS des anciennes popup fonctionne toujours en IFRAME

sauf que sous IE9 en DOCTYPE html4/loose, la fonction n'est plus surchargée, en mode debug je vois bien que window.close pointe toujours sur du code natif et l'appel à la fonction ne donne rien.

Quelqu'un aurait-il une astuce pour contourner cela sans changer le doctype ? un évènement, ou une syntaxe spécifique ?!

Merci

**RomainVALERI** · 25/07/2011, 12h36

As-tu essayé d'associer ton gestionnaire autrement que par la méthode DOM-0 (element.on{type} = function() {//code}) ?

Je pense notamment à addEventListener/attachEvent.

**Paul TOTH** · 25/07/2011, 14h46

Envoyé par RomainVALERI

As-tu essayé d'associer ton gestionnaire autrement que par la méthode DOM-0 (element.on{type} = function() {//code}) ?

Je pense notamment à addEventListener/attachEvent.

oui, le problème est que window.close() dans une iframe ne déclenche rien

**RomainVALERI** · 25/07/2011, 15h15

Ah ok, au temps pour moi, je comprends mieux. ^^

Du coup, par contre, quel est l'équivalent dans l'interface de ta nouvelle version (avec iframe) de la fermeture de popup ? il y a un bouton fermer dans l'iframe ? ou alors, si l'utilisateur n'est pas censé "fermer" la partie iframe, est-ce la fermeture de la page mère qui constitue l'événement probant ? si oui, il faut peut-être passer par onbeforeunload... à voir ^^

**SpaceFrog** · 25/07/2011, 15h23

onbeforeunload ?

**Paul TOTH** · 25/07/2011, 19h15

Envoyé par RomainVALERI

Ah ok, au temps pour moi, je comprends mieux. ^^

Du coup, par contre, quel est l'équivalent dans l'interface de ta nouvelle version (avec iframe) de la fermeture de popup ? il y a un bouton fermer dans l'iframe ? ou alors, si l'utilisateur n'est pas censé "fermer" la partie iframe, est-ce la fermeture de la page mère qui constitue l'événement probant ? si oui, il faut peut-être passer par onbeforeunload... à voir ^^

alors initialement j'avais une popup ouverte par window.open(...) et en effet un bouton "Fermer" qui fait appelle window.close();

tout cela étant un framework maison, j'ai pu remplacer le window.open() par une fonction iframe_popup() qui ouvre l'URL dans une iframe qui gère un mode modale avec quelques DIV supplémentaires.

avec IE6..IE8, FF, Opera, Chrome, il m'a suffit de surcharger window.close() pour que le bouton Fermer (ou tout autre appel à la fonction window.close() dans un AJAX, ou que sais-je) fonctionne comme avant.

sous IE9, window.close() appelle le code natif et ne prend pas en compte mon code à moi

démonstration du problème :

Code html :

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

1
2
3
4
5
6
7
8
9
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr"><html>
<head>
<title>IE9</title>
<body>
<iframe src="test.html"></iframe>
</body>
</html>

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>IE9</title>
<script type="text/javascript">
window.close = function() { alert('pas de close'); }
</script>
</head>
<body>
<a href="javascript:window.close()">close</a>
</body>
</html>

Il suffit de supprimer le DOCTYPE du fichier principal pour que cela fonctionne...mais bonjour les dégâts sur le rendu HTML

**RomainVALERI** · 25/07/2011, 20h37

Si tu veux déclencher des traitements à la fermeture, il me semble plus sain de passer par un gestionnaire lié à l'événement de fermeture plutot que de surcharger la méthode de fermeture elle-même, si je me fais bien comprendre ^^

Plus précisément, l'idée était d'essayer onbeforeunload :

Code html :

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 HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>IE9</title>
<script type="text/javascript">
window.onbeforeunload = function() { alert('juste avant la fermeture'); }
</script>
</head>
<body>
<a href="javascript:window.close()">close</a>
</body>
</html>

...ce qui ne modifie en rien ta façon de "fermer la fenêtre", et cela permet même (c'est habituellement la raison première de l'utilisation de cette technique, d'ailleurs) de gérer de la même manière les autres événements entrainant la fermeture (changement d'adresse dans la barre d'URL, clic sur l'icone "croix rouge" en haut à droite, fermeture du navigateur, etc.)

Par contre, si l'action est posée sur un bouton, et que l'événement de "fermeture" n'est plus souhaitable dans un contexte avec iframe, au bénéfice d'un traitement DOM sur la page mère qui vient "effacer" l'iframe, tu n'as bien sûr plus besoin de passer par la simulation d'une fermeture de popup...

**Paul TOTH** · 26/07/2011, 07h35

Envoyé par RomainVALERI

Si tu veux déclencher des traitements à la fermeture, il me semble plus sain de passer par un gestionnaire lié à l'événement de fermeture plutot que de surcharger la méthode de fermeture elle-même, si je me fais bien comprendre ^^

Plus précisément, l'idée était d'essayer onbeforeunload :

Code html :

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 HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>IE9</title>
<script type="text/javascript">
window.onbeforeunload = function() { alert('juste avant la fermeture'); }
</script>
</head>
<body>
<a href="javascript:window.close()">close</a>
</body>
</html>

...ce qui ne modifie en rien ta façon de "fermer la fenêtre", et cela permet même (c'est habituellement la raison première de l'utilisation de cette technique, d'ailleurs) de gérer de la même manière les autres événements entrainant la fermeture (changement d'adresse dans la barre d'URL, clic sur l'icone "croix rouge" en haut à droite, fermeture du navigateur, etc.)

Par contre, si l'action est posée sur un bouton, et que l'événement de "fermeture" n'est plus souhaitable dans un contexte avec iframe, au bénéfice d'un traitement DOM sur la page mère qui vient "effacer" l'iframe, tu n'as bien sûr plus besoin de passer par la simulation d'une fermeture de popup...

c'est tout le contraire

le bouton doit fermer l'IFRAME, mais une IFRAME ne se ferme pas avec window.close

mon exemple était trompeur, voici à quoi pourrait ressembler le code

Code html :

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

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
if (window.frameElement) {
  window.close = function() { 
   window.frameElement.parentNode.removeChild(window.frameElement);
  }
}
</script>

la seule solution que je vois actuellement et de retrouver tous les window.close() partout dans le code et les remplacer par un close_popup() qui serait sous cette forme:

Code html :

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

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
function close_popup() {
  if (window.frameElement)
    window.frameElement.parentNode.removeChild(window.frameElement);
  else
    window.close();
}
</script>

car le code HTML de la popup peut très bien être utilisé en dehors d'une iframe, la surcharge (conditionnée) de window.close() était la solution la plus immédiate et élégante...jusque IE9

**Bovino** · 26/07/2011, 08h15

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
if (window.frameElement) {
  window.close = function() { 
   window.frameElement.parentNode.removeChild(window.frameElement);
  }
}
</script>

Tu te compliques la vie pour rien comme ça et ça ne risque pas de fonctionner : frameElement référence l'objet window de ton iframe, qui n'a donc pas de parentNode.
Pourquoi ne pas passer tout simplement par la balise iframe ?

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
if (document.getElementsByTagName('iframe').length) {
  window.close = function() { 
   document.getElementsByTagName('iframe')[0].parentNode.removeChild(document.getElementsByTagName('iframe')[0]);
  }
}
</script>

**Paul TOTH** · 26/07/2011, 08h42

Envoyé par Bovino

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
if (window.frameElement) {
  window.close = function() { 
   window.frameElement.parentNode.removeChild(window.frameElement);
  }
}
</script>

Tu te compliques la vie pour rien comme ça et ça ne risque pas de fonctionner : frameElement référence l'objet window de ton iframe, qui n'a donc pas de parentNode.
Pourquoi ne pas passer tout simplement par la balise iframe ?

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
if (document.getElementsByTagName('iframe').length) {
  window.close = function() { 
   document.getElementsByTagName('iframe')[0].parentNode.removeChild(document.getElementsByTagName('iframe')[0]);
  }
}
</script>

merci pour ta contribution mais l'iframe a bel et bien un parent (frameElement c'est l'iframe pas l'objet window qui le contient), mon code fonctionne SAUF que sous IE9 on ne peut plus surcharger window.close()

**Bovino** · 26/07/2011, 18h41

Ah oui tiens... au temps pour moi

Sinon, effectivement, pour surcharger window.close() avec IE9, il ne faut étonnamment pas passer par l'objet window mais par une fonction classique, peut-être parce que le prototype de cet objet n'est pas disponible...

Code :

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

1
2
3
function close(){
    alert('toto');
}

**Paul TOTH** · 27/07/2011, 11h37

Arf, sans faire exprès j'ai trouvé la solution !

Code html :

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

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
if (window.frameElement) {
  window.close = function() { 
   window.frameElement.parentNode.removeChild(window.frameElement);
  }
  function close() { window.close() } // HACK !
}
</script>

c'est hallucinant, mais en définissant une fonction close() qui appelle window.close(), IE9 retrouve la surchage !

démonstration qui montre que c'est bien la surcharge qui est invoquée :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
  window.close = function() { 
   alert('window.close()';
  }
  function close() { 
   alert('close()');
  }
}
</script>
<button onclick="window.close()">window.close()</button>
<button onclick="close()">close()</button>

IE9 surcharger window.close()

JavaScript

Discussions similaires

Partager

Partager