Méthode blur ne marche pas sur firefox

**Mr.Robot12** · 17/01/2018, 12h03

bonjour,
je viens vers vous car j'ai un problème.
j'ai un diagramme de gantt et quand je clique sur une tâche il y a un <iframe> dans lequel j'affiche un graph la concernant.
le problème c'est que la méthode .blur ne marche pas sur firefox alors que ça marche sur internet explorer.

Code JAVASCRIPT :

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

1
2
3
4
 
$("iframe").blur(function(){
	$("#frame").hide("slow");
});

lors de l'affichage de la page le <iframe> existe déjà mais caché. donc quand je clique sur une tâche j'affecte l'attribut <iframe src="lien vers le graph">
est-ce que j'ai mal fais quelque chose ou alors c'est un problème de firefox ?

**eleydet** · 17/01/2018, 18h09

Bonsoir,

En cliquant dans l'iframe, on se retrouve dans l'iframe, pas dans la page. Les événements sont alors gérés... depuis l'iframe! Un exemple de code vaut mieux qu'un long discours.

Page "page.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
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      onclick=function() {
        alert("Message de l'iframe");
        top.une_fonction();
      };
    </script>
  </head>
  <body>
    <p>Un élément de l'iframe</p>
  </body>
</html>

Page "index.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
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      une_fonction=function() {
        alert("Message de la page");
      };
    </script>
  </head>
  <body>
    <p>Un élément de la page</p>
    <iframe src="page.html"></iframe>
  </body>
</html>

**Mr.Robot12** · 17/01/2018, 21h31

la méthode .blur est utilisée pour faire quelque chose quand on clique sur un élément et qu'on clique ailleurs non ?

par exemple quand j'utilise sur IE mon bout de code : je clique sur le <iframe> et que je clique ailleurs que sur ce <iframe> il se cache.

et c'est ça qui ne marche pas sur FireFox

**eleydet** · 18/01/2018, 07h53

Bonjour,

Utiliser l'élément iframe signifie qu'on travaille avec deux pages distinctes. La gestion de cet élément est donc un peu particulière.

**Mr.Robot12** · 18/01/2018, 08h14

pourquoi ça marche pas sur FireFox alors que ça marche sur IE ?
c'est ça que je comprends pas

**NoSmoking** · 18/01/2018, 10h20

Bonjour,
la gestion des événements, surtout l'ordre de prise en compte, peut varier d'un navigateur à l'autre, surtout avec IE.

Qui dit « blur » dit qu'il y ait eu au préalable un « focus », dans le cas de IE cela semble être le cas, au changement de src de l'<iframe> contrairement aux autres navigateurs.

Plusieurs solutions s'offrent à toi
• Mettre le focus sur l’élément après modification de sa src, mais attention il faut le différer sous risque que ton <iframe> se referme à peine ouverte.

Code :

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

1
2
3
4
5
6
7
8
$("#btn").on("click", function(){
  // changement de la source
  $("#frame").attr("src", "le_fichier_a_charger.html");
  // on diffère le focus
  setTimeout( function(){
    $("#frame").trigger("focus");
  }, 1000);
});

• ou pour moi une moins mauvaise solution est de ne pas utiliser « blur » mais un click sur le body de la page principale.

Code :

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

1
2
3
$("body").on("click", function(){
	$("#frame").hide("slow");
});

dans ce cas la fonction au clic devient

Code :

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

1
2
3
4
5
6
$("#btn").on("click", function(e){
  // important de stopper la propagation
  e.stopPropagation();
  // changement de la source
  $("#frame").attr("src", "le_fichier_a_charger.html");
});

**Mr.Robot12** · 18/01/2018, 10h39

merci je vais essayer

j'ai une erreur qui dit e.stopPropagation() is not a function
UPDATE : il fallait mettre d3.event.stopPropagation(); vu que j'utilise la librairie D3.js

merci beaucoup

Méthode blur ne marche pas sur firefox

JavaScript

Discussions similaires

Partager

Partager