Aprire popup da Flash

Piccola funzione testata su IE e su Firefox

Inserito il 02-12-2006

Se c'è una cosa sul web che proprio non mi piace, perchè spesso viene usata a sproposito o come tranello per spammare, con pubblicità non richieste, il pc dell'ignaro utente, queste sono le Popup. Il fatto è che a volte questo strumento male utilizzato, diventa davvero indispensabile, ad esempio per aprire un'immagine grande separata dal resto del sito, o per aprire un sito di dimensioni maggiori rispetto a quelle normalmente utilizzabili in una finestra con menù, segnalibri ecc... L'articolo non si sofferma a chiarire cosa sia una popup e in quale modo sia meglio usarla, ma si pone il compito di mostrare in quale modo sia possibile effettuare un porting del codice normalmente utilizzato in html (javascript) e sfruttarne l'azione in ActionScript.

Innanzi tutto, diamo un'occhiata al codice JS che ci consente di aprire la popup da un normale link html
window.open("strUrl", "strWinName", "strFeatures");
per utilizzare il codice in un normale link html farei
<a href="javascript:window.open('somepage.html', 'Some Title', '');">openPopup</a>
di conseguenza, utilizzare lo stesso link in flash, diventerebbe
getURL("javascript:window.open('somepage.html', 'Some Title', '');");
con una piccola aggiunta necessaria ad evitare che la pagina perda il contenuto e diventi completamente bianca
getURL("javascript:window.open('somepage.html', 'Some Title', '');void(0);");
a questo punto basterebbe assegnare l'azione ad un pulsante e il gioco sarebbe fatto, se non chè nel nostro codice manca una cosa fondamentale... la scelta delle features che determinano il modo in cui la popup deve essere visualizzata, quelle utilizzabili nei browser più comuni sono in ordine:

Direi che sia abbastanza intuitivo cosa rappresenti ognuna di queste "features", quindi passiamo oltre, arrivando al nostro codice in AS2, trasposizione funzionante dell'apertura popup su html

var openPopup:Function = function(url:String, winName:String, features:Object):Void {
	var filtered_features:String = "";
	if(features != undefined){
		filtered_features+= "width="+ ((features.width != undefined) ? features.width : System.capabilities.screenResolutionX)+", ";
		filtered_features+= "height="+ ((features.height != undefined) ? features.height : System.capabilities.screenResolutionY)+", ";
		filtered_features+= "left="+ ((features.left != undefined) ? features.left : 0)+", ";
		filtered_features+= "top="+ ((features.top != undefined) ? features.top : 0)+", ";
		filtered_features+= "resizable="+ ((features.resizable != undefined) ? features.resizable : "no")+", ";
		filtered_features+= "fullscreen="+ ((features.fullscreen != undefined) ? features.fullscreen : "no")+", ";
		filtered_features+= "menubar="+ ((features.menubar != undefined) ? features.menubar : "no")+", ";
		filtered_features+= "toolbar="+ ((features.toolbar != undefined) ? features.toolbar : "no")+", ";
		filtered_features+= "location="+ ((features.location != undefined) ? features.location : "no")+", ";
		filtered_features+= "scrollbars="+ ((features.scrollbars != undefined) ? features.scrollbars : "no")+", ";
		filtered_features+= "status="+ ((features.status != undefined) ? features.status : "no");
	} else {
		filtered_features+= "width="+System.capabilities.screenResolutionX+", ";
		filtered_features+= "height="+System.capabilities.screenResolutionY+", ";
		filtered_features+= "left=0, ";
		filtered_features+= "top=0, ";
		filtered_features+= "resizable=no, ";
		filtered_features+= "fullscreen=no, ";
		filtered_features+= "menubar=no, ";
		filtered_features+= "toolbar=no, ";
		filtered_features+= "location=no, ";
		filtered_features+= "scrollbars=no, ";
		filtered_features+= "status=no";
	}
	getURL("javascript:window.open('"+url+"', '"+winName+"', '"+filtered_features+"');void(0);");
}

Non mi soffermerò a spiegare il codice che compone la funzione, basti sapere che il codice va copiato e incollato in un frame del filmato e richiamato successivamente in questo modo:

openPopup("mypage.html", "myName", {width:300, height:200, left:100, top:100, resizable:"no", fullscreen:"no", menubar:"no", toolbar:"no", location:"no", scrollbars:"no", status:"no"});

Potremo modificare a nostro piacimento i controlli presenti, semplicemente modificando il no con uno yes, così come anche i valori numerici che rappresentano in ordine la dimensione orizzontale (width), quella verticale (height) e lo spostamento rispetto ai lati sinistro e alto (left e top) in modo da centrare agevolmente la nostra popup.

Mi pare tutto, in caso di problemi vi invito a contattarmi su info@v2online.it.


N.B.: La funzione è stata testata con successo per le versioni recenti di IE (5, 6, 7) e per le versioni di firefox (1, 1.5, 2). L'apertura popup funziona solo su web, per via delle restrizioni di Flash8 in locale, ma è possibile testarla anche con un webserver locale attivo.