JavaScript-fönster


Innehållsförteckning

    Visa innehållsförteckning


Browser Object Model (BOM) tillåter JavaScript att "prata med" webbläsaren.


Browser Object Model (BOM)

Det finns inga officiella standarder för Browser Object Model (BOM).

Eftersom moderna webbläsare har implementerat (nästan) samma metoder och egenskaper för JavaScript-interaktivitet kallas det ofta för metoder och egenskaper hos BOM.


Fönsterobjektet

Objektet window stöds av alla webbläsare. Det representerar webbläsarens fönster.

Alla globala JavaScript-objekt, funktioner och variabler blir automatiskt medlemmar av fönsterobjektet.

Globala variabler är egenskaper för fönsterobjektet.

Globala funktioner är metoder för fönsterobjektet.

Även dokumentobjektet (i HTML DOM) är en egenskap hos fönstret objekt:

window.document.getElementById("header");

är det samma som:

document.getElementById("header");

Fönsterstorlek

Två egenskaper kan användas för att bestämma storleken på webbläsaren fönster.

Båda fastigheterna returnerar storlekarna pixlar:

  • window.innerHeight - webbläsarfönstrets inre höjd (i pixlar)

  • window.innerWidth - webbläsarfönstrets inre bredd (i pixlar)

Webbläsarfönstret (webbläsarens vyport) inkluderar INTE verktygsfält och rullningslister.

Exempel

let w = window.innerWidth;
let h = window.innerHeight;

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Window</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Browser inner window width: " + window.innerWidth + "px<br>" +
"Browser inner window height: " + window.innerHeight + "px";
</script>

</body>
</html>

Andra fönstermetoder

Några andra metoder:

  • window.open() - öppna ett nytt fönster

  • window.close() - stäng det aktuella fönstret

  • window.moveTo() - flytta det aktuella fönstret

  • window.resizeTo() - ändra storlek på det aktuella fönstret