SCOPO
Agire sul contenuto di una popup da un'altra popup
STRUMENTI
Metodi Javascript per Flash | Apertura Popup
Comunicazione Child - Opener | Comunicazione Opener - Child
METODO
Notazione importante: tutto il codice Javascript che useremo per questo esempio è contenuto in un file *.js esterno. Per ragioni di spazio, ne riporto il contenuto in un file di testo, mentre qui ne spiego le singole parti.
Finestra a destra:
Nella finestra sulla destra viene aperta la pagina "destra.html", il cui codice html è il seguente:
<html>
<head>
<title>Filmato principale</title>
<script language="javascript"
type="text/javascript" src="script.js">
</head>
<body
bgcolor="#CCCCC"
marginwidth="0"
marginheight="0"
topmargin="0"
leftmargin="0"
onUnload="chiudi()">
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="[...]"
width=400 height=300 ID="mainMovie">
<PARAM NAME=movie VALUE="base.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#CCCCCC>
<embed
src="base.swf"
quality=high
bgcolor=#CCCCCC
swLiveConnect="true"
name="mainMovie"
width=400
height=300
type="application/x-shockwave-flash"
pluginspage="[...]">
</embed>
</object>
</body>
</html>
Da notare:
• nel tag <body> è presente il codice per evitare i bordi attorno al filmato
marginwidth="0" marginheight="0" topmargin="0" leftmargin="0"
• è presente il richiamo automatico, quando la pagina viene chiusa, ad una funzione per la chiusura dell'altra popup:
onUnload="chiudi()"
• sono presenti i tag di incorporamento per la comunicazione Javascript > Flash (id, name e swLiveConnect)
• il filmato incorporato nella pagina, "base.swf", è vuoto: serve solo di appoggio per il caricamento degli swf esterni.
• nel tag <head> è presente il collegamento al file *.js esterno, "script.js"
Finestra a sinistra:
Nella finestra a sinistra viene aperta la pagina "sinistra.html", contenente il filmato "menu.swf":
<html>
<head>
<title>Menu</title>
<script language="javascript"
type="text/javascript" src="script.js">
</script>
</head>
<body
bgcolor="#CCCCCC"
marginwidth="0"
marginheight="0"
topmargin="0"
leftmargin="0"
onUnload="chiudi()">
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="[...]"
width="150" height="300">
<param name=movie value="menu.swf">
<param name=quality value=high>
<embed
src="menu.swf"
width="150" height="300"
quality=high
type="application/x-shockwave-flash"
pluginspage="[...]">
</embed>
</object>
</body>
</html>
Da notare:
• non sono presenti i tag di incorporamento per Javascript, poichè il fimato chiama i metodi ma non ne subisce gli effetti
• nel tag <body> è presente il codice per evitare i bordi attorno al filmato
• è presente il richiamo automatico, quando la pagina viene chiusa, ad una funzione per la chiusura dell'altra popup:
• nel tag <head> è presente il collegamento al file *.js esterno, "script.js"
Ai diversi pulsanti del filmato "menu.swf", nella pagina di sinistra, è associato lo stesso script, che differisce solo per i parametri (in grassetto) passati alla funzione Javascript:
on (release) {
getURL("javascript:carica(1, 'esterno1.swf')");
}
Il primo parametro è il numero del livello su cui caricare il filmato esterno, mentre il secondo è nome e percorso del filmato esterno.
Il file js:
lancia()
Nel file *.js esterno è contenuta, innanzitutto, una funzione per l'apertura delle due popup, funzione che calcola le dimensioni dello schermo, e in base a queste posiziona le finestre una accanto all'altra.
function lancia(){
var u1 = 'sinistra.html';var u2 = 'destra.html';
var w = screen.width;
var h = screen.height;
var w1 = 150;var h1 = 300;
var w2 = 400;var h2 = 300;
var w3 = w1 + w2 + 10;
var x1 = Math.round(w / 2) - Math.round(w3 / 2);
var y = Math.round(h / 2) - Math.round(h1 / 2);
var x2 = x1 + 20 + w1
[...]
}
La particolarità più notevole della funzione è però un'altra: il riferimento alla popup appena aperta viene salvato in una variabile, ed è tramite questa variabile che il metodo Javascript può raggiungere la popup ed il filmato di destinazione.
sx = window.open(u1,'',[...]);
dx = window.open(u2,'',[...]);
La funzione per l'apertura delle due popup viene chiamata, al caricamento, dalla pagina di base, il cui codice html è il seguente:
<html>
<head>
<title>Pagina di base</title>
<script language="javascript" type="text/javascript"
src="script.js"></script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="lancia()">
</body>
</html>
carica()
La funzione che contiene il metodo Javascript LoadMovie, carica(), riceve due parametri (ricordo che la funzione viene chiamata dai pulsanti che stanno nel filmato incorporato in "sinistra.html", e quindi in sx).
Stabilisce se il browser utilizzato è Internet Explorer, e in base a questo setta il percorso per il filmato di destra, passando per la variabile che custodisce il riferimento alla popup.
window.opener.dx.mainMovie
window.opener.dx.document.mainMovie
Ricapitolando: siamo dentro "sinistra.html", e chiamiamo la funzione contenuta nel file *.js, passando i due parametri. La funzione utilizza il metodo Javascript per Flash LoadMovie(), con i due parametri appena ricevuti.
Il metodo, per raggiungere il filmato "base.swf" contenuto nell'altra popup, segue questo percorso:
• window.opener, e arriva alla pagina di base che ha aperto le due popup
• dx o dx.document, e arriva all'altra popup
• mainMovie, e arriva al filmato ("mainMovie" nel codice html)
chiudi()
Infine, abbiamo la funzione per la chiusura delle due popup. Se proviamo a chiuderne una, viene chiusa anche l'altra:
function chiudi(){
window.opener.dx.close();
window.opener.sx.close();
}
La funzione riceve la chiamata dalla prima pagina che viene chiusa, e per questo motivo utilizza window.opener per far riferimento all'altra. L'utilizzare il codice per chiudere entrambe nella stessa funzione semplifica il tutto: qualunque finestra venga chiusa, viene chiusa anche l'altra.
FILE
