Récupérer le id d'une iframe en cliquant dessus

**smfrd8** · 06/03/2014, 23h11

j'ai une div(id="tabs2") qui contient 4 iframe, je veux que lorsque je clique sur une jframe, je recupere son id, j'ai fais ça mais ça n'a rien donné:

Code :

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

1
2
3
4
5
6
7
8
9
$("document").ready(function() {
    elm= document.getElementById("tabs2");
    frames=elm.getElementsByTagName("iframe");
    for(var i=0; i<frames.length; i++){
        frames[i].click(function(){
            alert(this.id);
        })
    }
});

Merci d'avance

**smfrd8** · 07/03/2014, 09h07

ça n'a pas marché, ça fonctionnera bien s'il s'agissait d'une autre balise autre que "iframe"

**smfrd8** · 07/03/2014, 11h25

j'ai essayé aussi ça mais ça n'a pas marché

Code :

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

1
2
3
4
5
function iframeclick() {
            document.getElementById("1").contentWindow.document.body.onclick = function() {
            alert();
    }
}

**la.lune** · 08/03/2014, 03h39

Je suis désolé pour la solution donné qui ne marche pas. Certes j'avoue dans un iframe le contexte change, c'est tout un autre document à part et un ensemble d’événement que JQuery ne peut pas manipuler directement.

Alors voici la bonne solution, en partie du pure javascript, alors il faut donner des noms à tes iframes pour leur récupération, ceci pour une solution cross browser. Après récupération on va ajouter l’événement de clique dans lequel l'id sera récupéré.

Code HTML :

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

1
2
3
4
5
6
7
 
<div id="tab2">
    <iframe id="if1" name="frame1" ></iframe>
    <iframe id="if2" name="frame2" ></iframe>
    <iframe id="if3" name="frame3" ></iframe>
    <iframe id="if4" name="frame4" ></iframe>
</div>

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
$(document).ready(function (){
      $("#tab2 iframe").each(function (i){
                var monIframe=window.frames[this.name];
                monIframe.onclick=function(){
                  //On affiche l'id à la console à chaque clique sur n'importe quel iframe
                  console.log(this.frameElement.id); 
             }; 
       });
});

Mais il faut éviter de faire des alerte() pour tester car ça bloque les scripts de ton navigateur, alors il faut utiliser la console qui te permet aussi de déboguer en te montrant les erreurs et même la ligne où ils sont produits. Alors avec Chrome,Firefox, IE9+..: tape F12 -> Console ou cliquer droit sur la page et faire ->inspecter l

**smfrd8** · 08/03/2014, 08h12

j'ai essayé ce que vous m'avez donné mais apparemment la ligne suivant contient une erreur:

Code :

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

monIframe.onclick=function(){

le code de l'erreur est :

Code :

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

1
2
3
4
5
6
7
8
9
Uncaught TypeError: Cannot set property 'onclick' of undefined servletYoutube:26
(anonymous function) servletYoutube:26
x.extend.each jquery.js:657
x.fn.x.each jquery.js:266
(anonymous function) servletYoutube:24
c jquery.js:3074
p.fireWith jquery.js:3186
x.extend.ready jquery.js:433
q

**smfrd8** · 08/03/2014, 08h27

En utilisant Youtube analytics, j'ai pu parcourir toutes mes iframes et attribuer à chaque iframe comme id, l'identifiant de de la vidéo, ainsi les id sont stockés dans un tableau videoArray

Code :

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

1
2
3
4
5
6
7
8
<script src="lunametrics-youtube-v6.js"></script>
<script type="text/javascript">
  var playerArray = [],
            videoArray = [];
            $("document").ready(function() {
                if(window.XDomainRequest){jQuery.ajaxTransport(function(e){if(e.crossDomain&&e.async){if(e.timeout){e.xdrTimeout=e.timeout;delete e.timeout}var t;return{send:function(n,r){function i(e,n,i,s){t.onload=t.onerror=t.ontimeout=jQuery.noop;t=undefined;r(e,n,i,s)}t=new XDomainRequest;t.onload=function(){i(200,"OK",{text:t.responseText},"Content-Type: "+t.contentType)};t.onerror=function(){i(404,"Not Found")};t.onprogress=jQuery.noop;t.ontimeout=function(){i(0,"timeout")};t.timeout=e.xdrTimeout||Number.MAX_VALUE;t.open(e.type,e.url);t.send(e.hasContent&&e.data||null)},abort:function(){if(t){t.onerror=jQuery.noop;t.abort()}}}}})}
                trackYouTube();
            });

et voici le code de la fonction trackYoutube();

Code :

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
32
33
34
35
36
37
38
39
40
41
function trackYouTube() {
                // iterate through every iframe on the page
                $('iframe').each(function(i) {
                    // grab the video source and other properties
                    var baseUrlLength,
                    $iframe = $(this),
                    iframeSrc = $iframe.attr('src'),
                    isYouTubeVideo = false,
                    videoID
                    // if the video uses the http protocol
                    if (iframeSrc.substr(0,25) == "http://www.youtube.com/v/") {
                        baseUrlLength = 25;
                        isYouTubeVideo = true;
 
                    }
                    // otherwise if the video uses the https protocol
                    else if (iframeSrc.substr(0,26) == "https://www.youtube.com/v/") {
                        baseUrlLength = 26;
                        isYouTubeVideo = true;
                    }
 
                    // if we're dealing with a YouTube video, store its information in our arrays
                    if (isYouTubeVideo) {
                        // grab the videoID
                         videoID = iframeSrc.substr(baseUrlLength);
                         url = '//gdata.youtube.com/feeds/api/videos/' + videoID + '?v=2&alt=json';
                        // if the ID ends with extra characters...
                    if (videoID.indexOf('&') > -1) {
                        // ...remove the extra characters
                        videoID = videoID.substr(0, videoID.indexOf('&'));
                        }
 
                    // put an object in our array with the videoID...
                    videoArray[i] = {};
                    videoArray[i].id = videoID;
 
                    // put the videoID on the iframe as its id
                    $iframe.attr('id', videoID);
                    }
                });
            }

**smfrd8** · 08/03/2014, 08h48

Mais le probléme n'est pas réglé parce que mon objectif est d'ecouter ou controle mes videos youtube lors du clique dessus, pour cela je dois utiliser l'api youtube iframe: https://developers.google.com/youtub...e#Requirements

pour cela j'ai fais:

Code :

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
function onYouTubeIframeAPIReady() {
	// insert YouTube Player objects into our playerArray
         alert("1");
	for (var i = 0; i < videoArray.length; i++) {
		playerArray[i] = new YT.Player(videoArray[i].id, {
			events: {
                                'onReady': onPlayerReady,
				'onStateChange': onPlayerStateChange
			}
		});
	}
}
function onPlayerReady(event) {
       alert("2");
   event.target.playVideo();
    }
// when the player changes states
function onPlayerStateChange(event) {
	   alert("3");
	// if the video begins playing, send the event
	if (event.data == YT.PlayerState.PLAYING) {
		alert();
	}
	// if the video ends, send the event
	if (event.data == YT.PlayerState.ENDED) {
		alert();
	}
}

Mais la ligne suivante contient une erreur c'est à dire l'objet YT.player ne se cré pas:

Code :

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

playerArray[i] = new YT.Player(videoArray[i].id, {

du coup quand je clique sur la video, la fonction

Code :

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

onPlayerStateChange

n'est pas appelé.

**la.lune** · 08/03/2014, 19h05

Ce n'est pas mon code qui ne marche pas, c'est plutôt chez toi que que tu arrive à récupérer tes iframe utilisant le name. Mon code est multi-navigateur , et je n'ai pas donner une technique de récupération directe du iframe avec id car il y aura quelque chose qui ne va pas marcher dans certains navigateurs.

Il faut lire l'erreur affiché, si tu teste mon code avec tes pages, alors la variable monIframe est de type undefined, donc impossible d’enregistrer un événement d'écoute du clique sur une variable de type undefinded, c'est ce qui est affiché.

C'est simple au cas où tu doute, teste mon code avec le code html que je t'ai donné et regarde de que ça donne?

Il faut t'assurer que tu arrive à récupérer tes iframe avec l'objet window et non pas l'objet document, car tu ne pourra jamais les manipuler avec des événement bindé directement avec le DOM du document en cour.

Tu peux attribuer des noms aux iframes comme tu attribue les id, c'est simple il faut ajouter l'instruction d'attribution de name après l'attribution de ids, quelque chose comme ça:

Code JavaScript :

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

1
2
$iframe.attr('id', videoID);
$iframe.attr('name', "nom"+videoID);

**la.lune** · 11/03/2014, 05h33

J'ai pris un peu de mon temps pour aller voir à quoi ça ressemble l'API youtube, vu que j'ai jamais eu à l'utiliser, alors j'ai pu facilement réaliser ce que tu veux mais j'ai pourtant constaté que tu utilise mal l'API, donc c'est pour ça que tu as des obstacles.

Déjà, il faut savoir que les id des iframes c'est toi qui doit fournir, ils n'ont rien n'avoir avec les ids des video. La 2e chose tu crée les objets players sans fournir l'adresse de la vidéo à moins que les iframes contiennent déjà des url absolu vers les video. Et la 3e chose, tu n'est pas obligé de créer toi même les iframes, tu peux tout juste spécifier le div que tu veux que la vidéo s'affiche et tu lui donne un id, l'API fait le reste à ta place il enlève le div qui est là et met un iframe avec l'id du div que tu as donné.

Je vois aussi tu fais event.target.playVideo(); alors chaque vidéo sera lancé automatiquement et comment tu fais pour savoir que c'est tel video qui a réellement déclenché l'action. Ce n'est pas un simple clique sur le iframe qui va résoudre le problème, on veut connaitre réellement la vidéo X s'il est en play, en pause ou arrêté.

Alors moi j'ai mis 4 ids de vidéo dans un tableau videos=[..]: 4 identifiants youtube des vidéos que je veux afficher. Et j'ai crée 4 div, et je joue sur les indices, tous commencent par "lecteur.. suivi du numéro. A côté un span aussi numéroté pour afficher l'état actuel de la video.

Alors voici le code 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
16
<div >
            <div id="lecteur1"></div>    
            <span id="affichetat1" style="display: block;margin-bottom: 10px;" > </span>    
</div>
<div >
            <div id="lecteur2"></div>    
            <span id="affichetat2" style="display: block;margin-bottom: 10px;" > </span>    
</div>
<div >
            <div id="lecteur3"></div>    
            <span id="affichetat3" style="display: block;margin-bottom: 10px;" > </span>    
</div>
<div >
            <div id="lecteur4"></div>    
            <span id="affichetat4" style="display: block;margin-bottom: 10px;"> </span>    
</div>

Alors quand je crée un player je les stocke dans un tableau lecteurs=[] donc il y aura 4 lecteurs. Voici la première partie du code Javascript

Code JavaScript :

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
var videos=["-MifpF7p1P0","vkBiEuZSq9s","JXJH5SB30TI","W3eJWpvIl0g"]; 
//.................
//Ceci va créer manuellement les iframe pas besoin de les créer, les id des video suiffisent
      var lecteurs=[];
      function onYouTubeIframeAPIReady() {
for(var i=0;i<4;i++){
         //l'id du iframe n'a rien n'avoir avec l'id de la vidéo
         lecteurs[i] = new YT.Player('lecteur'+(i+1), {
          height: '270',
          width: '300',
          videoId: videos[i],
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
        $("#affichetat"+(i+1)).html("La "+(i+1)+"e Video est bien affiché");
        }
      }

L'astuce ici c'est qu'il faut savoir que chaque lecteur est un objet alors une référence unique, donc si une vidéo déclenche un événement, alors au sein des méthodes défini par l'API qui nous passent l'objet event en paramètre, je peux chercher l'indice de la video qui a déclenché l’événement avec ce bout de code:

Code :

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

1
2
3
4
5
var j; 
for(var i=0;i<4;i++)
if(event.target===lecteurs[i]){
j=i; break;
}

Et voici le code JavaScript en sa totalité pour gérer ce cas:

Code JavaScript :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
//Voici les ids des videos que je veux affichés 
     var videos=["-MifpF7p1P0","vkBiEuZSq9s","JXJH5SB30TI","W3eJWpvIl0g"];
 
      var tag = document.createElement('script');
 
tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
//Ceci va créer manuellement les iframe pas besoin de les créer, les id des video suiffisent
      var lecteurs=[];
      function onYouTubeIframeAPIReady() {
          for(var i=0;i<4;i++){
         lecteurs[i] = new YT.Player('lecteur'+(i+1), {
          height: '270',
          width: '300',
          videoId: videos[i],
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
        $("#affichetat"+(i+1)).html("La "+(i+1)+"e Video est bien affiché");
        }
      }
 
function onPlayerReady(event) {
        var j;
         for(var i=0;i<4;i++)
            if(event.target==lecteurs[i])j=i;
        //j est l'indice du lecteur qui est pret 
        //alors tu peux déclencher l'evènement de lecture automatique si tu veux
        //avec lecteurs[j].palyVideo()
      }
 
function onPlayerStateChange(event) {
//on doit connaitre le lecteur qui a déclenché l'evènement
            var j;
          for(var i=0;i<4;i++)
            if(event.target===lecteurs[i]){
                j=i;
break;}
//Pour le playing l’événement déclenche quand la vidéo commence à lire et non pas directement quand on clique sur PLAY
if (event.data == YT.PlayerState.PLAYING) {
        $("#affichetat"+(j+1)).html("Lecture encours de la "+(j+1)+"e video et id de la video="+videos[j]);
         }
if (event.data == YT.PlayerState.PAUSED) {
        $("#affichetat"+(j+1)).html("La "+(j+1)+"e video est en pause et id de la video="+videos[j]);
         }
           if (event.data ===YT.PlayerState.ENDED) {
        $("#affichetat"+(j+1)).html("Fin de la lecture de la "+(j+1)+"e video et id de la video="+videos[j]);
            }
}
 
      function playVideo(i){
         lecteurs[i].pauseVideo(); 
      }
      function stopVideo(i) {
 
        lecteurs[i].stopVideo();
        $("#affichetat"+i).html(" Arreté");
      }
      function pauseVideo(i){
         lecteurs[i].pauseVideo(); 
      }

Récupérer le id d'une iframe en cliquant dessus

jQuery

Discussions similaires

Partager

Partager