DOMMouseScroll et iframe

**dad72** · 13/11/2013, 19h19

Bonjour,

J'ai un sousis que je ne parvient pas a résoudre.

en faite quand je place un événement en Jquery pour recuperer le scroll de la molette de la souris, ca marche que dans la page sans Iframe et dans l'Iframe ce meme code ne fonctionne pas.

Je vous montre l'exemple de code

La page ou j'ai mon Iframe

Code html :

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

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head>
	<script src="Data/Noyau/Js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<iframe src="teste_frame.php" align="center" width="100%" frameborder="0" scrolling="no" id="iframe0"></iframe>
</body>
</html>

et la page de l'Iframe (ou l'appel $(this).wheel() ne fonctionne pas)

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head>
	<script src="Data/Noyau/Js/jquery.min.js" type="text/javascript"></script>	
</head>
<body>
<script>
$.fn.wheel = function (callback) {
    return this.each(function () {
        $(this).on('mousewheel DOMMouseScroll', function (e) {
            e.delta = null;
            if (e.originalEvent) {
                if (e.originalEvent.wheelDelta) e.delta = e.originalEvent.wheelDelta / -40;
                if (e.originalEvent.deltaY) e.delta = e.originalEvent.deltaY;
                if (e.originalEvent.detail) e.delta = e.originalEvent.detail;
            }
 
            if (typeof callback == 'function') {
                callback.call(this, e);
            }
        });
    });
};      
$(this).wheel(function(e) {
                e.preventDefault();
                alert("scrool");
});
</script>
</body>
</html>

Par contre si je fait (sur la page qui appel l'iframe)

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head>
	<script src="Data/Noyau/Js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<iframe src="teste_frame.php" align="center" width="100%" frameborder="0" scrolling="no" id="iframe0"></iframe>
<script>
$.fn.wheel = function (callback) {
    return this.each(function () {
        $(this).on('mousewheel DOMMouseScroll', function (e) {
            e.delta = null;
            if (e.originalEvent) {
                if (e.originalEvent.wheelDelta) e.delta = e.originalEvent.wheelDelta / -40;
                if (e.originalEvent.deltaY) e.delta = e.originalEvent.deltaY;
                if (e.originalEvent.detail) e.delta = e.originalEvent.detail;
            }
 
            if (typeof callback == 'function') {
                callback.call(this, e);
            }
        });
    });
};      
$(this).wheel(function(e) {
                e.preventDefault();
                alert("scrool");
});
</script>
</body>
</html>

La sa fonctionne.

Pourquoi ça ne fonctionne pas dans l'iframe ?

Merci pour votre aide.

**danielhagnoul** · 13/11/2013, 19h54

Le problème c'est le contenu de $( this ) ! Je vous suggère de faire un essai avec $( window.parent.document ).

**dad72** · 13/11/2013, 20h38

Oui sa fonctionne si je suis sur la page qui possède l'<iframe>, mais pas quand je suis dans l'iframe.

En faite mon Iframe est en pleine page et c'est de là que je voudrais recuperer l’événement.

en gros j'ai un index et je fait des onglets en Jquery, et sur chaque onglet je fait des iframe qui sont en pleine page de plus les iframe sont entourer de div

Code html :

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

<div id="tabs-1"><iframe></iframe></div>

donc ce sélecteur $( window.parent.document ) ne fonctionne pas complètement. quand je change d'onglet sur mon programme, je ne récupère pas les événement de la molette de la souris.

Merci encore.

**dad72** · 13/11/2013, 23h41

Bon j'ai resolu le probleme en diminuant la hauteur de mes iframe de 10px et le probleme c'est resolu. je c'est pas trop pourquoi, ça reste un mystère, mais bon c'est resolu.

c'est bien $( this ) que je devais utiliser.

PS: je ne trouve pas le \[CODEINLINE\] sur l’éditeur de message. je l'ai ecrit a la main ?

**danielhagnoul** · 14/11/2013, 10h27

Envoyé par dad72

PS: je ne trouve pas le \[CODEINLINE\] sur l’éditeur de message. je l'ai ecrit a la main ?

Il n'y en a pas, je suis toujours obligé de le faire manuellement et cela commence à devenir énervant !

Sur DVP, les utilisateurs de Firefox ont toujours été privilégiés, il y a même un outil, alors que les utilisateurs de Chrome ont toujours été considérés comme quantité négligeable. Il serait peut-être temps que cela change.

**Bovino** · 14/11/2013, 10h38

Daniel, il existe une solution pour ajouter un bouton codeinline dans Chrome.

DOMMouseScroll et iframe

jQuery

Vue hybride

Discussions similaires

Partager

Partager