!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

AJAX
popup
Børre Stenseth
JavaScript > Noen biblioteker >Popup

Popup

Hva
Popupvinduer

Det er mange grunner til å ikke bruke popupvinduer, men det er kanskje noen grunner til å bruke det. "Ubestilte" popupvinduer, vanligvis med reklame, er utrolig irriterende og det er gode grunner til at nettleserne har funksjonalitet for å kontrollere slike vinduer. På den annen side er det trolig noen grunner til at de kan brukes. I dette materialet brukes de til to ting: Eksponering av data som skal kunne kopieres direkte fra vinduet og eksponering av kodebiter eller forklaringer som er ment å fungere som en slags fotnoter for leseren. I alle tilfeller er det slik at popup-knapper er tydelig merket og ingen popupvinduer kommer ubestilt, altså uten at brukeren har valgt å få det opp ved å klikke.

Nedenfor skal vi se på noen teknikker for å lage popupvinduer ved hjelp av JavaScript, for ulike formål

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:

Shakespeares sonetter
(1..154)

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

du kan inspisere kildekoden på et eksempel http://www.it.hiof.no/~borres/dw/popup/poptest2.html
Referanser

All kode er sitert i teksten

Vedlikehold

B. Stenseth, revidert desember 2008

( Velkommen ) JavaScript > Noen biblioteker >Popup ( PageTip )