11519 sujets

JavaScript, DOM et API Web HTML5

Hello,

j'ai dans un fichier xml du texte + des balises iframe Vimeo et Youtube.

Je voudrais, lorsque je clique sur l'une ou l'autre de ces vidéos, créer un événement jquery en parallèle au lancement des vidéos.

Le code
$(document).on("click","div",function(){
    //événement//
});

fonctionne très bien sur n'importe quelle div de mon fichier xml, mais pas sur la balise iframe.
Ni sur son conteneur (.videoWrapper).
Smiley decu

Serait-ce dû au fait que ces conteneurs soient en responsive ?

Voici le CSS :
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin-bottom:7px;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


Remédiable ???

Merci beaucoup pour votre aide.
Modifié par MattSaf (19 Mar 2014 - 10:59)
Bonsoir MattSaf,

Votre problème n'est pas lié au comportement responsive du CSS.
Si vous souhaitez avoir accès aux contenus d'une balise iframe, vous devez passez par la fonction jQuery .contents() :
jQuery(function($){
  $('iframe').contents().find('body').click(function(){
    alert('OK');
  });
})

Vous avez à disposition la démo de ce code en ligne : http://codepen.io/guiwint/pen/HcFki/.

Espérant que cette solution réponde à votre attente.
Bonne soirée et bon code...
Bonjour Guiwint et merci.

Votre réponse m'a en effet été utile, mais ne m'a malheureusement pas encore permis de résoudre le problème. Smiley decu

En effet, mes iframe se trouvent dans mon fichier .txt et pas dans la page dans le body de la page html.
Je n'ai pas de problème pour modifier leurs attributs CSS, ils sont donc bien identifiables...

Un grand merci
Si mon iframe est dans le body de la page Html je peux me débrouiller pour qu'en cliquant dessus il se produise un événement.
Ça j'y suis parvenu.

Mais je n'y arrive pas lorsque l'iframe se trouve dans un fichier externe (ici un .txt)

Donc si je comprends bien votre message, kustolovic, ce n'est pas possible ?

Ce qui est étonnant, c'est que je ne parviens pas non plus à créer un événement lorsque je clique sur la div conteneur de l'iframe qui lui aussi se trouve dans le fichier .txt. Smiley confus
Modifié par MattSaf (25 Mar 2014 - 12:05)
En fait, je remarque que ma réelle question est plutôt la suivante :

"Comment créer un événement jquery sur un élément d'un fichier .txt ?"

Et en écrivant cela je fais le test de placer le code jquery dans le fichier .txt ....
.... ET ÇA MARCHE !!!!!!

Smiley biggrin

Sur les div, mais pas encore sur les iframe...
Modifié par MattSaf (25 Mar 2014 - 12:12)
Je me permets de remettre mes codes, au cas où une erreur s'y glisserait :

Html :
<div id="Text"></div>


JS :
$(document).ready(function(){
    $.ajax({
        url : "test.txt",
        dataType: "text",
        success : function (data) {
            $("#Text").html(data);
        }
    });
});


Et sur mon fichier "test.txt" :
<div id="bloc2">
	<iframe id="frameTest"></iframe>
</div>


Comment donc faire pour qu'en cliquant sur l'iframe un événement se déclenche ????

Merci mille fois
Modifié par MattSaf (25 Mar 2014 - 12:27)
J'ai trouvé comment rendre le container d'une iframe cliquable.
Merci à Roko C. Buljan qui a répondu à cette question ici :

<div class="iframeholder">
  <iframe src="http://roxon.in" id="left"></iframe>
</div>


CSS:

iframe{  
   pointer-events:none; 
}


JS:

$(document).ready(function () {

   $('.iframeholder').on('click', function( e ) {
     e.preventDefault();
     alert('test');
   });

});


Smiley smile
Modérateur
Pas mal l'astuce de contournement, hormis la mauvaise compatibilité IE ( http://caniuse.com/pointer-events )

MattSaf a écrit :

Comment donc faire pour qu'en cliquant sur l'iframe un événement se déclenche ????

Merci mille fois


Pour répondre à cette question, il faut attacher l'évènement une fois que l'élément existe, donc dans le sucess() de la méthode ajax:


$(document).ready(function(){
    $.ajax({
        url : "test.txt",
        dataType: "text",
        success : function (data) {
            $("#Text").html(data);
            $('#truc').on('click', function( e ) {
              alert('Yo');
            });
        }
    });
});


ou alors utiliser les filtres:


$('#Text').on('click', '#truc', function( e ) {
  alert('Yo');
});
Ah oui, IE.............................. Smiley lol

Je note donc précieusement ta solution, kustolovic.
Merci beaucoup.

Malheureusement, dans le cas présent, l'iframe héberge un lien Vimeo.
Et donc, parce que la vidéo est déjà cliquable pour se lancer, le seul moyen de faire fonctionner cette solution (ainsi que celle de Roko C. Buljan) c'est de faire
iframe{  
   pointer-events:none; 
}

Mais alors plus possible de lancer la vidéo... C'est le serpent qui se mort la queue Smiley nut

Ce que je cherche précisément à faire c'est que lorsqu'on clique sur une vidéo cela coupe une musique de fond qui se lance par défaut.
Modifié par MattSaf (25 Mar 2014 - 17:22)
Ce sujet n'est pas résolu, mais j'ai opté pour autre chose, la présence de liens Vimeo rendant les choses très compliquées.

Merci