JavaScript Window - Model obiektu przeglądarki

Model Obiektów Przeglądarki (Browser Object Model (BOM) umożliwia JavaScriptowi dialog z przeglądarką.

Model Obiektów Przeglądarki (Browser Object Model (BOM))

Nie istnieje oficjalny standard dla Modelu Obiektów Przeglądarki (BOM).

Nowoczesne przeglądarki już (prawie) zaimplementowały te same metody i właściwości interakcji JavaScript, więc często są wspomniane jako metody i właściwości BOM.

Obiekt Window

Wszystkie przeglądarki obsługują window Obiekt. Reprezentuje okno przeglądarki.

Wszystkie globalne obiekty JavaScript, funkcje i zmienne automatycznie stają się członkami obiektu window.

Globalne zmienne są właściwościami obiektu window.

Globalne funkcje są metodami obiektu window.

Nawet (obiekt HTML DOM) obiekt document jest właściwością obiektu window:

window.document.getElementById("header");

Równoważne do:

document.getElementById("header");

Rozmiar okna

Te dwie właściwości mogą być używane do określenia rozmiaru okna przeglądarki.

Te dwie właściwości zwracają rozmiary w pikselach:

  • window.innerHeight - wewnętrzna wysokość okna przeglądarki (w pikselach)
  • window.innerWidth - wewnętrzna szerokość okna przeglądarki (w pikselach)

Okno przeglądarki (polityka przeglądarki) nie obejmuje pasków narzędziowych i pasków przewijania.

Dla Internet Explorer 8, 7, 6, 5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

lub

  • document.body.clientHeight
  • document.body.clientWidth

Praktyczne rozwiązanie JavaScript (dla wszystkich przeglądarek):

Przykład

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Spróbuj sam

Ten przykład pokazuje wysokość i szerokość okna przeglądarki (bez pasków narzędziowych i pasków przewijania):

Inne metody okien

Niektóre inne metody:

  • window.open() - otwarcie nowego okna
  • window.close() - zamknięcie bieżącego okna
  • window.moveTo() - przeniesienie bieżącego okna
  • window.resizeTo() - ponowne dostosowanie bieżącego okna