11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous, je suis nouveau sur ce forum, mais je suis un lecteur assidu et vous m'avez déjà appris beaucoup et m'avez convaincu de passer au CSS2.0.
Smiley help
Je viens de créer une console DJ virtuelle qui contrôle en javascript deux mp3 encapsulés via QuickTime. Jusque là tout va bien.
L'objectif est de créer un "iDJ" virtuel; pour ceux qui ne connaissent pas, il s'agit d'une petite table de mixage qui contrôle deux iPods. Smiley cool
Pour créer ces deux iPods j'utilise l'application iTunesCatalog (malheureusement les fichiers php générés ne sont pas "accessibles" Smiley confused ) que j'intègre dans ma page via deux iframes. Les fenêtres des iPods sont elles-mêmes des iframes. Donc je dois accéder aux mp3 dans une iframe elle-même dans une iframe. Comme ici
je fais comme ça:

	qtipod1=document.getElementById("frame1").contentDocument.getElementById("ssframe1").contentDocument.qtipod1;


Smiley hein Là oú ça se complique pour moi, c'est quand on change de mp3 en changeant le contenu de la seconde iframe. J'ai en particulier une fonction IsDownloaded (qui simule le chargement du mp3 à travers une barre de progression et récupère les informations du morceau). Elle fonctionnait bien quand la page principale l'appelait. Maintenant c'est au chargement de l'iframe que je doit le faire et ça ne fonctionne plus, la console retourne "document.IsDownloaded is not object"

Smiley question Ma première question est: y-a-t-il une syntaxe particulière pour appeler une fonction définie dans la page principale depuis une iframe? et dans le cas particulier d'une iframe dans une autre iframe?

Smiley question La seconde est: quelle est l'équivalent de window.onload pour une iframe?

Smiley question Et enfin: quelles sont les règles de "persistance" (je ne sais pas si c'est comme ça qu'on dit) des variables entre l'iframe et la page principale? l'iframe peut-elle mettre à jour une variable dans la page principale. Et si cette variable est un objet? Y-a-t-il une différence de syntaxe que l'on accéde dans un sens ou dans l'autre document->iframe ou iframe->document?

Je ne suis pas encore super à l'aise avec les objets javascript Smiley smile .

Merci. Et bravo pour la qualité du site. Smiley clapclap

Note: je travaille sous Mac OS X avec Dreamweaver8 ou BBedit, je teste sous Safari 2 ou Firefox 2.
Modifié par dj DMSR (27 Jun 2007 - 02:10)
Moi, pour pas me prendre la tête avec les iframes (sachant qu'il y a quelques différences entres les navigateurs) je ferais ça en AJAX.

Plus simple, et aucun problème de persistance (comme tu dis). Et aucun problème pour travailler sur toute les parties du document.
Modifié par MoOx (22 Jun 2007 - 09:16)
Je ne vais pas répondre à tout mais voici déjà quelques infos:

* Si tu es dans une iframe et que tu cherche quelque chose dans la page qui la contient :

parent.<qqch>

* L'evenement onload exist aussi pour une iframe. Une iframe a les meme caracteristique que l'object window.

* Tout est persistent Smiley lol
iframe -> document : parent.<mon object>
document -> iframe : frames['id de l'iframe'].document.<mon object>
Merci Grumelo de tes réponses (à toutes mes questions), je me remets au boulot tout de suite.

A quoi sert onStateChange() ? est-ce que la page principale peut grâce à cette méthode surveiller tout changement dans l'iframe?

MoOx, je suis contraint de garder ces iframes, car comme expliqué plus haut, elles sont générées par un programme (iTunesCatalog). Je dois donc faire avec...

Mais j'ai en projet de faire un iDJ 2.0, avec cette fois un seul iPod. On chargera cette fois les lecteurs de la console par drag & drop en glissant la fenêtre de l'iPod sur un des deux lecteurs... Mais bon je vais déjà tenté de terminer l'iDJ 1.0 pour l'instant.
Mais même comme ça je ne pense pas que ce sera de l'Ajax (pas de HttpRequest), car le plugin QuickTime est capable de changer de source sans recharger la page grâce au DOM et à enablejavascript.

bye
La seule solution, c'est que le contenu de l'iframe rappelle une fonction, parent.
Si tu veux accéder à l'iframe pendant son chargement, ou avant, ça a des effets spéciaux, (comme bloquer le chargement de l'iframe).

Mais si il faut changer de le contenu de l'iframe, autant le faire en javascript Smiley biggrin
Je patine.. grave:
dans l'iframe les propriétés de quicktime ne fonctionnent plus.
avant dans la page par ex qtipod1.GetDuration() fonctionnait
maintenant la console répond "qtipod1.GetDuration() is not object".

Je me demande si je ne vais pas changer de stratégie:
au lieu de controler ce qui se passe dans l'iframe, je vais laisser deux plugins QT encapsulés dans la page principale (ça marchait très bien), et au chargement de l'iframe avec une fonction récupérer la source (mp3) du plugin de l'iframe de la fenêtre de l'iPod pour la passer à celui du player dans la page parent (parent.parent.chgsrc() par ex avec 2 "parent." puisque il y a deux iframe imbriquées).

Merci à vous 3, ça fait plaisir de trouver un peu de soutien à des milliers de km

Note: l'exemple que j'ai mis en ligne fonctionne sous safari, il y a encore qqs pb avec firefox. On dirait que Firefox a besoin d'avoir chargé totalement la source du plugin pour pouvoir en tirer qqs infos, comme la durée, alors que safari peut dès que le téléchargement commence.
Le changement de stratégie me mène aux mêmes écueils.
Je suis incapable de trouver pourquoi dans l'iframe je ne peux pas accéder aux propriétés de quicktime: "Value undefined (result of expression qtipod1.GetTarget) is not object".
Smiley decu

function chgsrc() {
	qt=document.qt1;
	mp3=qt.GetTarget();
	qtipod1=parent.parent.document.qtipod1;
	qtipod1=qtipod1.SetTarget(mp3);

}


Je souhaiterais que cette fonction à l'ouverture de l'iframe puisse récupérer l'url du mp3 encapsulé dans celle-ci pour le transmettre au plugin de la page principale. (si cette technique fonctionne je tenterai de l'adapter aux pages citées plus haut).
Smiley rolleyes
J'ai trouvé! (essai ici)

function chgsrc() {
	qt=document.qt1;
	mp3=qt.GetURL();
	qtipod1=parent.parent.document.qtipod1;
	qtipod1=qtipod1.SetURL(mp3);
	parent.parent.StopIt(parent.parent.document.qtipod1);
}


Je patinais pour plusieurs raisons:
1- il fallait utiliser la propriété GetURL() de QuickTime et non pas GetTarget() (qui retourne la racine de la page et non pas l'url de la source)
2- cette fonction ne "passe" pas au chargement de la page, sans doute qu'à ce moment-là, le plug-in est chargé après la fonction, ainsi les objets traités par celle-ci n'existent pas encore, il faudra donc utiliser un bouton "exporter" pour lancer cette fonction chgsrc().
3- c'était bien la syntaxe qtipod1=parent.parent.document.qtipod1; avec "document" et notez que remplacer parent.parent par top ne marchait pas (?).

il y a quand même un souci.
la propriété GetURL lance la lecture de la source (même si autoplay est à false) au changment de la source.
J'ai donc ajouté dans chgsrc() un appel à une fonction qui stop la lecture, mais ça ne fonctionne pas avec Safari, alors que ça marche sous Firefox, étrange...

Smiley langue

je vais maintenant adapter tout ça aux fichiers php des iPod et créer des boutons pour charger les mp3 dans les players respectifs de la console (il faudra aussi récupérer nom et durée des mp3).
Je noterai ce sujet "résolu" quand j'aurai fini...

J'espére qu'on pourra s'y croire un peu: DJ on-line (même si il n'y a pas moyen d'avoir une pré-écoute casque) avec 10.000 mp3 (extraits de 30sec lowfi) en ligne va falloir enchaîner grave.... seules mes propres productions seront en ligne en intégralité et en 128k.

Merci
Tchao. Smiley smile
Si tu as ta réponse oublies pas de fermer ton topic en ajoutant [Résolu] dans le sujet du premier message Smiley lol
ça y est! Smiley langue
Quelques détails à régler, mais c'est fonctionnel.
Reste que le site est loin d'être terminé.
Merci à tous.

Longue vie à Alsacreations!

Smiley cligne

la fonction finale:


function chgsrc1() {
	parent.parent.Change(90);
	qt=document.qt1;
	var mp3=qt.GetURL();
	var name1=qt.GetMovieName();
	qtipod1=parent.parent.document.qtipod1;
	qtipod1=qtipod1.SetURL(mp3);
	parent.parent.document.qtipod1.SetControllerVisible(false);
	parent.parent.document.qtipod1.SetMovieName(name1);
	parent.parent.StopIt(parent.parent.document.qtipod1);
	parent.parent.IsDownloaded1();
	parent.parent.end1=parent.parent.document.qtipod1.GetEndTime();
}