Popup
Enkle popupvinduer
Det er en enkel sak å sette opp et vindu som skal fylles fra en kjent URL. Funksjonen som gjør dette er:
window.open(url, wname, wstyle)
der url er den siden vi vil åpne, wname er navnet på vinduet og wstyle er de egenskapene det nye vinduet skal ha. url er grei nok, men de to andre parametrene krever en kommentar.
Vinduets navn Dette navnet identifiserer vinduet. Det er altså ikke tittelen på vinduet og det har ikke noe med title-elementet å gjøre. Det er det samme som det vi kan bruke når vi oppgir target. I praksis er det slik at dersom vi gjør flere open-kall etter hverandre med samme navn, vil vinduet bli "gjenbrukt".
Vinduets egenskaper Vi kan sette en rekke egenskaper for det nye vinduet. Vi kan angi størrelse, plassering, hvorvidt det skal være scrollbart osv. Den komplette (?) lista er f.eks. slik ( det skal ikke være linjeskift når du oppgir en slik string):
width=400,height=200,toolbar=yes,location=yes,directories=yes, status=yes,menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes
Altså en list med kommaseparerte navn=verdi-par. Merk at denne stringen (eller deler av den) må angis uten blanke og uten linjeskift. Min erfaring er at det ikke er alle egenskapene som settes slik jeg ønsker, og noen (eldre?) nettlesere vil ha 1 for yes og 0 for no. Et rimelig vindu for de formålene jeg anga i starten av denne modulen kan være slik:
scrollbars=yes,resizable=yes,width=600,height=600,status=no
En funksjon som er rimelig robust og som dessuten sørger for at popup-vinduet vårt alltid havner fremst når vi setter det opp er slik:
function simplepopup(theURL,wname,wstyle)
{
if(wstyle=='*')
wstyle='scrollbars=yes,resizable=yes,width=600,height=600,status=no';
try{
newwindow=window.open(theURL, wname, wstyle);
if (window.focus) {newwindow.focus()}
}
catch(E){
// ??
alert('If you have blocked pop-ups\n Try Ctrl-Alt when clicking');
}
}
Merk at vi får et "standard" vindu dersom vi oppgir * som egenskaper. Merk dessuten at vi tar et initiativ som respons på en mulig popup-blokkering. Dersom vi forsøker å åpne en side som ikke eksisterer får vi vanlig 404-respons i popupvinduet.
:simplepopup('http://www.it.hiof.no/~borres/self/bs1.png','pop','*')
Generert popupvinduer
I stedet for å åpne en url, kan vi produsere innholdet i popupvinduet fra javascript-kode i det vinduet som setter opp popupvinduet. Dette er en interessant variant som gjør det lett å lage små popup-vinduer etter behov. Denne teknikken er basert på at vi bruker document.write- funksjonen i det nye vinduet. Vi kan f.eks. lage følgende:
function producepopup(wname,wstyle)
{
if(wstyle=='*')
wstyle='scrollbars=yes,resizable=yes,width=600,height=600,status=no';
try{
newwindow=window.open('', wname, wstyle);
newwindow.document.write('<html><head><title>hei</title></head>');
newwindow.document.write('<body><h1>Dette er en side</h1>');
newwindow.document.write('<input type="button" value="ta meg vekk" '+
'onclick="self.close()"/>');
newwindow.document.write('</body></html>');
newwindow.document.close();
if (window.focus)
{
newwindow.focus()
}
}
catch(E){
// ??
alert('If you have blocked pop-ups\nTry Ctrl-Alt when clicking');
}
}
Der vi altså begynner med å sette opp et vindu med blank url. Dersom dette går bra fortsetter vi å produsere innhold i det nye vinduet.
:producepopup('pop','*')
Dette er interessant. Vi kan i en viss forstand kontrollere popupvinduet ut over de egenskapene vi kan sette i window.open(...). Spørsmålet som melder seg er om vi kan opprette en vindu med innhold, og så modifisere dette innholdet. Dette viser seg å være mer komplisert og vi kommer fort bort i situasjoner der nettleserne oppfører seg forskjellig.
AjaxPop
Det vi kan gjøre er å la popupvinduet fylle seg selv ved hjelp av AJAX. Det gjelder å formidle requestadressen til popupvinduet. Dette kan vi gjøre ved å sende adressen, og eventuelle parametere, som parameter til popupvinduets url. Dette fungerer fordi document.location inneholder både url'en til dokumentet og alle parameterne. Vi kan da lage oss et generisk ajax-popupvindu med følgende script:
// assuming jquery.js
function loadcontent()
{
try{
var T=''+document.location;
// assume format: url1?url2?par1=v1&par2=v2
// request address will be: url2?par1=v1&par2=v2
var pos=T.indexOf('?');
if(pos==-1){throw 'no address';}
T=T.substring(pos+1);
$('#content').load(T);
}
catch(E){
document.getElementById('content').innerHTML=E;
}
}
Denne funksjonen kalles ved <body onload="loadcontent()">
Bruk kan være slik:
HTML-koden;
<script>
function produceShakepopup(ix)
{
var c='http://www.it.hiof.no/~borres/'; // for readability only
simplepopup(c+'common/jscripts/stdajaxpop.html?'+c+'cgi-bin/ajaxtest/shakereturn.py?sonette_num='+ix,'pop','*')
}
</script>
<fieldset>
<legend>Shakespeares sonetter</legend>
<form style="margin-top:10px;margin-bottom:20px" action="#">
<input style="margin-right:10px"
type="button"
value="Vis nr"
onclick="produceShakepopup(this.form.nr.value);return false;"/>
<input type="text" name="nr" value="18" maxlength="3" size="4"/>
(1..154)
</form>
</fieldset>
eller
