JavaScript Window Object

JavaScript Window är ett globalt gränssnitt (objekttyp) som används för att styra webbläsarfönstrets livscykel och utföra olika operationer på det.

En global variabel window, som representerar det aktuella webbläsarfönstret som koden körs i, finns tillgänglig i vår JavaScript-kod och kan nås direkt genom att använda window bokstavligt talat.

Det representerar ett fönster som innehåller en webbsida, som i sin tur representeras av dokumentobjektet. Ett fönster kan vara ett nytt fönster, en ny flik, en ramuppsättning eller en enskild ram som skapas med JavaScript.

I en webbläsare med flera flikar representerar ett fönsterobjekt en enskild flik, men vissa av dess egenskaper som innerHeight, innerWidth och metoder som resizeTo() påverkar hela webbläsarfönstret.

När du öppnar ett nytt fönster eller en ny flik skapas automatiskt ett fönsterobjekt som representerar det fönstret/fliken.

Egenskaperna hos ett fönsterobjekt används för att hämta information om det fönster som för närvarande är öppet, medan dess metoder används för att utföra specifika uppgifter som att öppna, maximera, minimera fönstret etc.

För att förstå fönsterobjektet ska vi använda det för att utföra några operationer och se hur det fungerar.

Användning av JavaScript Window Object

Låtsas använda JavaScript window object för att skapa ett nytt fönster, med hjälp av metoden open(). Denna metod skapar ett nytt fönster och returnerar ett objekt som vidare kan användas för att hantera det fönstret.

I koden ovan har vi använt window-objektet för det befintliga fönstret för att skapa ett nytt fönster med hjälp av open()-metoden. I open()-metoden kan vi ange den URL som ska öppnas i det nya fönstret (vi kan också låta den vara tom), namnet på fönstret, bredden och höjden på det fönster som ska skapas.

Följande är syntaxen för fönsterobjektets open()-metod:

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

Vi kan ange så många egenskaper som vi vill, när vi skapar ett nytt fönster.

När open()-metoden utförs returnerar den referensen till fönsterobjektet för det nya fönster som skapats, som du kan tilldela en variabel, som vi har gjort i koden ovan. Vi har tilldelat värdet som returneras av window.open()-metoden till win-variabeln.

Vi har använt win-variabeln för att få tillgång till det nya fönstret, till exempel för att få fram fönstrets namn, för att få fram platsen för det fönster som öppnade det nya fönstret osv.

Det finns många egenskaper och metoder för fönsterobjektet, som vi har listat nedan.

Hitta måtten på ett fönster

Vi kan få fram höjden och bredden på ett fönster genom att använda fönsterobjektets inbyggda egenskaper.

Vi kan också få tillgång till dokumentobjektet genom att använda ett window object(window.document) som ger oss tillgång till HTML-dokumentet, och därmed kan vi lägga till nya HTML-element eller skriva något innehåll till dokumentet, som vi gjorde i exemplet ovan.

JavaScript Window Object Properties

Wondow object properties hänvisar till de variabler som skapats inuti windows object.

I JavaScript är alla tillgängliga data kopplade till window object som properties.

Vi har tillgång till window object’s properties som t.ex: window.propertyname där propertyname är namnet på egenskapen.

En tabell med de mest populära egenskaperna för fönsterobjekt finns nedan:

.

Egenskap	Beskrivning
Closed	återger ett boolskt värde som anger om ett fönster har stängts eller inte
Document	specificerar ett dokumentobjekt i fönstret.
history	specificerar ett historikobjekt för fönstret.
frames	specificerar en array med alla ramar i det aktuella fönstret
defaultStatus	specificerar det standardmeddelande som ska visas i statusfältet för Window.
innerHeight	specificerar den inre höjden på fönstrets innehållsområde.
innerWidth	specificerar den inre bredden på fönstrets innehållsområde.
length	specificerar antalet ramar som ingår i fönstret.
location	specificerar lokaliseringsobjektet för window
name	specificerar namnet på fönstret
top	specificerar referensen för det översta webbläsarfönstret.
self	återger referensen till den aktuella aktiva ramen eller det aktuella aktiva fönstret.
parent	återger det aktuella fönstrets överordnade ram eller fönster.
status	specificerar det meddelande som visas i fönstrets statusfält när en aktivitet utförs på fönstret.
screenleft	specificerar fönstrets x-koordinat i förhållande till användarens bildskärm
screenTop	specificerar fönstrets y-koordinat i förhållande till användarens bildskärm
screenX	Anger x-koordinaten för fönster relativt till en användares bildskärm
screenY	Anger y-koordinaten för fönster relativt till en användares bildskärm

Låtsas vi ta ett exempel för att se några av dessa egenskaper i praktiken:

I exemplet ovan har vi skapat ett nytt fönster, bara för att göra dig bekant med skapandet av nya fönster och även för att få dig att förstå att när vi skapar ett nytt fönster har det nuvarande fönstret ett annat fönsterobjekt och det nya fönstret kommer att ha ett separat fönsterobjekt.

Vi har sedan försökt få tillgång till några egenskaper hos det nya fönster som skapats.

TASK: Prova några fler fönsteregenskaper i ovanstående kodlekplats för att öva och förstå hur fönsteregenskaper fungerar.

JavaScript Window Object Methods

Fönsterobjektets metoder hänvisar till de funktioner som skapats inne i Window Object och som kan användas för att utföra olika åtgärder på webbläsarfönstret, t.ex. hur det visar ett meddelande eller tar emot indata från användaren.

Nedan har vi listat några av de vanligaste metoderna för fönsterobjektet:

.

Metod	Beskrivning
alert()	specificerar en metod som visar en varningsruta med ett meddelande en OK-knapp.
blur()	specificerar en metod som tar bort fokus från det aktuella fönstret.
clearInterval()	specificerar en metod som rensar timern, som är inställd med hjälp av metoden setInterval().
close()	specificerar en metod som stänger det aktuella fönstret.
confirm()	specificerar en metod som visar en dialogruta med ett meddelande och två knappar OK och Cancel
focus()	specificerar en metod som sätter fokus på aktuellt fönster.
open()	specificerar en metod som öppnar ett nytt webbläsarfönster
moveTo()	specificerar en metod som flyttar ett fönster till en angiven position
moveBy()	specificerar en Metod som flyttar ett fönster i förhållande till dess nuvarande position.
prompt()	specificerar en metod som uppmanar till inmatning.
print()	specificerar en metod som skickar ett utskriftskommando för att skriva ut innehållet i det aktuella fönstret.
setTimeout()	specificerar en metod som utvärderar ett uttryck efter ett angivet antal millisekunder.
setInterval()	specificerar en metod som utvärderar ett uttryck vid angivna tidsintervall (i millisekunder)
resizeBy()	specificerar det belopp som fönstret ska ändras i storlek
resizeTo()	används för att dynamiskt ändra storleken på fönstret
scroll()	rullar fönstret till en viss plats i dokumentet
scrollBy()	rullar fönstret med det angivna värdet
stop()	denna metod stoppar laddningen av fönstret

Låt oss ta ett exempel och se några av ovanstående metoder i aktion:

I exemplet ovan har vi använt några fönstermetoder, du kan prova fler metoder. I nästa handledning kommer vi att lära oss om History-objektet, som är en egenskap hos window-objektet.