JavaScript Window Object

JavaScript Window er en global grænseflade (objekttype), som bruges til at styre browservinduets livscyklus og udføre forskellige operationer på det.

En global variabel window, som repræsenterer det aktuelle browservindue, som koden kører i, er tilgængelig i vores JavaScript-kode og kan tilgås direkte ved hjælp af window.

Det repræsenterer et vindue, der indeholder en webside, som igen er repræsenteret af dokumentobjektet. Et vindue kan være et nyt vindue, en ny fane, et rammesæt eller en individuel ramme oprettet med JavaScript.

I tilfælde af en browser med flere faner repræsenterer et vindueobjekt en enkelt fane, men nogle af dets egenskaber som innerHeight, innerWidth og metoder som resizeTo() påvirker hele browservinduet.

Når du åbner et nyt vindue eller en ny fane, oprettes der automatisk et vindueobjekt, der repræsenterer det pågældende vindue/faneblad.

Egenskaberne for et vindueobjekt bruges til at hente oplysninger om det vindue, der er åbent i øjeblikket, mens dets metoder bruges til at udføre specifikke opgaver som at åbne, maksimere, minimere vinduet osv.

For at forstå vindueobjektet skal vi bruge det til at udføre nogle operationer og se, hvordan det fungerer.

Anvendelse af JavaScript Window Object

Lad os bruge JavaScript-vindueobjektet til at oprette et nyt vindue ved hjælp af metoden open(). Denne metode opretter et nyt vindue og returnerer et objekt, som yderligere kan bruges til at administrere dette vindue.

I koden ovenfor har vi brugt vinduesobjektet for det eksisterende vindue til at oprette et nyt vindue ved hjælp af open()-metoden. I open()-metoden kan vi angive den URL, der skal åbnes i det nye vindue (vi kan også lade den være tom), vinduets navn, bredden og højden på det vindue, der skal oprettes.

Følgende er syntaksen for vinduesobjektet open() metoden:

let newWindow = window.open(url, windowName, );

Vi kan angive så mange egenskaber, som vi ønsker, mens vi opretter et nyt vindue.

Når open()-metoden udføres, returnerer den referencen til vinduesobjektet for det nye vindue, der er oprettet, som du kan tildele til en variabel, som vi har gjort i koden ovenfor. Vi har tildelt den værdi, der er returneret af window.open()-metoden, til win-variablen.

Den har vi brugt win-variablen til at få adgang til det nye vindue, som f.eks. at få vinduets navn, få placering af det vindue, der åbnede det nye vindue osv.

Der er mange egenskaber og metoder til vinduesobjektet, som vi har anført nedenfor.

Find dimensioner for et vindue

Vi kan få højden og bredden af et vindue ved at bruge vinduesobjektets indbyggede egenskaber.

Vi kan også få adgang til dokumentobjektet ved hjælp af et window-objekt(window.document), som giver os adgang til HTML-dokumentet, og derfor kan vi tilføje nye HTML-elementer eller skrive et hvilket som helst indhold til dokumentet, som vi gjorde i eksemplet ovenfor.

JavaScript Window Object Properties

Vinduesobjektets egenskaber henviser til de variabler, der er oprettet inde i windows-objektet.

I JavaScript er alle tilgængelige data knyttet til window-objektet som egenskaber.

Vi kan få adgang til window-objektets egenskaber som f.eks: window.propertyname hvor propertyname er navnet på egenskaben.

En tabel over de mest populære vinduesobjektegenskaber er angivet nedenfor:

Property	Description
	closed	giver en boolsk værdi, der angiver, om et vindue er blevet lukket eller ej
	document	angiver et dokumentobjekt i vinduet.
history	angiver et historikobjekt for vinduet.
frames	angiver et array med alle rammer i det aktuelle vindue
	defaultStatus	angiver den standardmeddelelse, der skal vises i statuslinjen for Window.
innerHeight	angiver den indre højde for vinduets indholdsområde.
	innerWidth	angiver den indre bredde for vinduets indholdsområde.
length	angiver antallet af rammer, der er indeholdt i vinduet.
location	angiver placeringsobjektet for window
name	angiver navnet på vinduet
top	angiver referencen til det øverste browservindue.
self	giver referencen til den aktuelle aktive ramme eller det aktuelle aktive vindue.
parent	giver den overordnede ramme eller det overordnede vindue til det aktuelle vindue.
status	angiver den meddelelse, der vises i vinduets statuslinje, når der udføres en aktivitet på vinduet.
screenleft	angiver vinduets x-koordinat i forhold til en brugers skærmskærm
	screenTop	angiver vinduets y-koordinat i forhold til en brugers skærmskærm
screenX	Angiver x-koordinaten for vinduet i forhold til en brugers skærm
screenY	Angiver y-koordinaten for vinduet i forhold til en brugers skærm

Lad os tage et eksempel for at se nogle af disse egenskaber i aktion:

I eksemplet ovenfor har vi oprettet et nyt vindue, bare for at gøre dig fortrolig med oprettelse af nye vinduer og også for at få dig til at forstå, at når vi opretter et nyt vindue, så har det aktuelle vindue et andet vinduesobjekt, og det nye vindue vil have et separat vinduesobjekt.

Vi har derefter forsøgt at få adgang til nogle egenskaber for det nye vindue, der er oprettet.

OPGAVE: Prøv nogle flere vinduesegenskaber i ovenstående kodelegeplads for at øve og forstå, hvordan vinduesegenskaber fungerer.

JavaScript Window Object Methods

Vinduesobjektets metoder henviser til de funktioner, der er oprettet inde i Window Object, og som kan bruges til at udføre forskellige handlinger på browservinduet, f.eks. hvordan det viser en meddelelse eller får input fra brugeren.

Nedenfor har vi listet nogle af de mest almindeligt anvendte vinduesobjektmetoder op:

Metode	Beskrivelse
alert()	Specificerer en metode, der viser en advarselsboks med en besked en OK-knap.
blur()	angiver en metode, der fjerner fokus fra det aktuelle vindue.
clearInterval()	angiver en metode, der rydder timeren, som er indstillet ved hjælp af setInterval()-metoden.
close()	specificerer en metode, der lukker det aktuelle vindue.
confirm()	specificerer en metode, der viser en dialogboks med en meddelelse og to knapper OK og Annuller
focus()	specificerer en metode, der sætter fokus på det aktuelle vindue.
open()	angiver en metode, der åbner et nyt browservindue
moveTo()	angiver en metode, der flytter et vindue til en bestemt position
moveBy()	angiver en metode, der flytter et vindue i forhold til dets aktuelle position.
prompt()	angiver en metode, der beder om input.
print()	angiver en metode, der sender en udskriftskommando for at udskrive indholdet af det aktuelle vindue.
setTimeout()	angiver en metode, der evaluerer et udtryk efter et angivet antal millisekunder.
setInterval()	angiver en metode, der evaluerer et udtryk med angivne tidsintervaller (i millisekunder)
resizeBy()	angiver det beløb, hvormed vinduet skal ændres i størrelse
resizeTo()	anvendes til dynamisk ændring af vinduets størrelse
scroll()	ruller vinduet til et bestemt sted i dokumentet
scrollBy()	ruller vinduet med den angivne værdi
stop()	denne metode stopper indlæsning af vinduet

Lad os tage et eksempel og se et par af de ovennævnte metoder i aktion:

I eksemplet ovenfor har vi brugt nogle vinduesmetoder, du kan prøve flere metoder. I den næste tutorial lærer vi om History-objektet, som er en egenskab ved window-objektet.