11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JS non intrusif et prototype : onLoad

Bonjour,

Je dois intégrer une application Flash qui communique avec des script JS dans une page web. Ces scripts JS utilisent la librairie prototype. Comme le tout est déjà un peu bancal (mais je n'ai pas le choix), j'essaie de faire ça proprement.

Quels mécanismes existent dans prototype pour exécuter certaines méthodes après le chargement de composants dans la page ?

J'ai essayé ceci, mais sans succès :
$$('body').observe('load', onBodyLoad); 
$('flashCont').observe('load', onFlashLoad); // pour <div id="flashCont">


Merci de votre aide.
Modifié par 84mickael (15 Mar 2008 - 20:40)
Si je me rappelles bien des syntaxes prototype, remplace déjà

$$('body').observe('load', onBodyLoad);

par

new Event.observe(window, 'load', onBodyLoad);

Pour ce qui est de ton document Flash, s'il celui-ci peut communiquer avec JS, pourquoi ne lancent-tu pas 'onFlashLoad' dans ton Flash ? Au moins, tu seras certain que ta fonction onFlashLoad sera lancée au chargement du Flash.
On m'a donné un template pour intégrer le Flash dans le HTML + JS. J'essaie de le nettoyer, de déporter au maximum les scripts dans des fichiers externes mais ce n'est pas évident car je ne suis pas fan du JS !

Ca ne semble fonctionner que si l'un des scripts JS est placé dans le <body> après la <div> englobant le Flash ! C'est pour ça que j'ai mis le code dans une fonction (onFlashLoad) que je vais tenter d'exécuter au bon moment.

A suivre...
Modifié par 84mickael (13 Mar 2008 - 20:23)
Finalement, voici le résultat :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>...</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css" media="screen, projection">
			@import "css/style.css";
			body {background-color: ${bgcolor};}
		</style>
		<script type="text/javascript" src="js/prototype.js"></script>
		<script type="text/javascript" src="js/swfobject.js"></script>
		...
		<script type="text/javascript">
			// <![CDATA[

			new Event.observe(window, 'load', loadFlash);
			
			function loadFlash() {
				var so = new SWFObject(
					"${swf}.swf",
			   		"flashApplication",
			   		"${width}",
			   		"${height}",
			   		"${version_major}",
			   		"${bgcolor}"
				);
				so.addParam("allowScriptAccess", "always");
				so.write("flashContainer");
			}
			
			function initFlash() {
				init("flashApplication");
				...
			}

			// ]]>
		</script>
	</head>
	<body>
		<div id="flashContainer">
			This text may be replaced.
		</div>
	</body>
</html>


La fonction loadFlash est exécutée après le chargement de la page, tandis que la fonction initFlash est exécutée par le programme Flash.

Le seul petit défaut est que le texte "This text may be replaced" apparait avant d'être remplacé.

Si vous voyez mieux, n'hésitez pas ! Et merci Kadheus.
Modifié par 84mickael (17 Mar 2008 - 23:05)
Salut,

'swfobject' est ce qu'on pourrait appeler le 'must' pour intégrer dynamiquement du Flash dans un document et tu as bien raison de l'utiliser.

'Le seul petit défaut est que le texte "This text may be replaced" apparait avant d'être remplacé.'
>> Et bien supprime le texte ou remplace-le par un message de chargement du genre 'Chargement en cours...'
Sujet clos
Aller à