Méthode blur ne marche pas sur firefox

Version imprimable

17/01/2018, 12h03
Mr.Robot12

Méthode blur ne marche pas sur firefox
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:

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 ?

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:

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:

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>

17/01/2018, 21h31
Mr.Robot12

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
18/01/2018, 07h53
eleydet

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.
18/01/2018, 08h14
Mr.Robot12

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

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:

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:

1 2 3 $("body").on("click", function(){ $("#frame").hide("slow"); });
dans ce cas la fonction au clic devient
Code:

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"); });

18/01/2018, 10h39
Mr.Robot12

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 :)