Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 35 di 44
  • livello principiante
Indice lezioni

Comunicazione tra popup

Far comunicare due filmati contenuti in due popup diverse
Far comunicare due filmati contenuti in due popup diverse
Link copiato negli appunti

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"

margin

margin

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

margin margin 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"

margin

margin

topmargin="0"

leftmargin="0"

onUnload="chiudi()">

<object

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="[...]"

>

<param name=movie value="menu.swf">

<param name=quality value=high>

<embed

src="menu.swf"

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

visualizza l'esempio | scarica l'esempio

Ti consigliamo anche