Discussion :

[smfrd8]

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]

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

[smfrd8]

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]

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]

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]

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