Browser Object Model (BOM)

Wat is het Browser Object Model (BOM)?

Het Browser Object Model (BOM) is een verzameling van objecten die je via JavaScript kunt gebruiken om direct met de browser te communiceren. In tegenstelling tot het Document Object Model (DOM), dat draait om de structuur en inhoud van de webpagina, gaat het bij BOM om alles wat daarbuiten valt: het browservenster, de navigatiegeschiedenis, de locatiebalk, enzovoort.

BOM wordt niet officieel gestandaardiseerd door een organisatie zoals het W3C (dat wel de DOM specificeert), maar is desondanks breed ondersteund door alle moderne browsers. De implementatie kan iets verschillen per browser, maar de basisobjecten zijn vrijwel overal beschikbaar.

Verschil tussen BOM en DOM

Hoewel ze vaak samen worden gebruikt, verschillen BOM en DOM duidelijk van elkaar:

Je kunt het zo zien: DOM laat je werken met de inhoud van de pagina, BOM met de omgeving waarin die pagina draait.

Hoe BOM functioneert in de browser

In elke browser is het hoogste object in de hiërarchie het window object. Dit window object bevat allerlei subobjecten zoals navigator, location, history, screen, en andere functies zoals alert() en setTimeout(). Dit maakt het mogelijk om met één object bijna alle browsergerelateerde acties uit te voeren.

De structuur van BOM ziet er bijvoorbeeld zo uit:

window
├── navigator
├── location
├── history
├── screen
├── alert()
├── setTimeout()
└── ...

Omdat window standaard is in de browseromgeving, hoef je het niet expliciet aan te roepen. alert("Hi") is dus gelijk aan window.alert("Hi").

Waarom het Browser Object Model belangrijk is

Het Browser Object Model speelt een essentiële rol bij de interactie tussen een webpagina en de browser waarin deze wordt geladen. Zonder BOM zou je met JavaScript alleen de HTML-structuur kunnen aanpassen, maar niet kunnen inspelen op de context waarin de pagina draait.

Toegang tot browserfunctionaliteit

Via het BOM heb je toegang tot functies die verder gaan dan alleen de inhoud van een webpagina. Je kunt bijvoorbeeld:

• Nieuwe vensters of tabbladen openen met window.open().

• Gebruikers automatisch doorverwijzen naar een andere URL met window.location.href.

• Bepalen of de gebruiker terug kan gaan naar een vorige pagina via window.history.

Deze functies zijn cruciaal voor het bouwen van interactieve en gebruiksvriendelijke websites.

Interactie met de gebruikersomgeving

Het BOM maakt het ook mogelijk om informatie op te vragen over de omgeving van de gebruiker. Denk hierbij aan:

• Het type en de versie van de browser via navigator.userAgent.

• De schermresolutie met screen.width en screen.height.

• De taalinstellingen van de gebruiker met navigator.language.

Door deze informatie slim te gebruiken, kun je de gebruikerservaring aanpassen aan het apparaat of de voorkeuren van de bezoeker.

Ondersteuning van dynamische webapplicaties

In moderne webapplicaties speelt BOM een ondersteunende rol. Je kunt er bijvoorbeeld mee bepalen of bepaalde functionaliteiten beschikbaar zijn (zoals geolocatie via navigator.geolocation) of tijdelijk data opslaan in window.localStorage.

Hoewel veel frameworks en libraries tegenwoordig bepaalde abstracties bieden, blijft het BOM belangrijk voor:

• Functionaliteiten die niet via het DOM beschikbaar zijn.

• Browsergedrag controleren, bijvoorbeeld bij het sluiten van een tab.

• Basisinteracties zoals alerts, bevestigingen en timers (setTimeout, setInterval).

De kern van BOM: het window object

Het window object vormt de basis van het Browser Object Model. Alles binnen het BOM valt hier direct of indirect onder. In een browseromgeving is window het globale object, wat betekent dat alle globale variabelen en functies hieraan zijn gekoppeld.

Het window object uitgelegd

Wanneer je een JavaScript-bestand uitvoert in de browser, gebeurt dat binnen de context van het window object. Alle methodes en eigenschappen van het BOM zijn hier onderdeel van. Je hoeft window vaak niet expliciet te gebruiken, omdat het impliciet aanwezig is.

Bijvoorbeeld:

alert("Hallo!");

is exact hetzelfde als:

window.alert("Hallo!");

En dit geldt ook voor andere functies zoals setTimeout, setInterval, of het benaderen van andere BOM-objecten zoals window.location of window.history.

Relatie met andere objecten

Het window object is de container voor meerdere subobjecten en functies. Deze subobjecten geven toegang tot verschillende onderdelen van de browser:

• ·      window.location → Informatie over de URL en navigatie

• ·      window.navigator → Informatie over de browser en het apparaat

• ·      window.screen → Schermresolutie en kleurendiepte

• ·      window.history → Navigatiegeschiedenis

• ·      window.document → De HTML-structuur van de pagina (DOM)

Je kunt het window object zien als de toegangspoort tot alles wat de browser beschikbaar stelt, zowel op pagina-niveau (DOM) als op browser-niveau (BOM).

Voorbeeld: gebruik van window.alert()

function greetUser() {
  window.alert("Welkom op onze website!");
}

In dit voorbeeld roept de functie begroeting() een pop-up op met behulp van window.alert(). Deze methode pauzeert de uitvoering van de pagina totdat de gebruiker op OK klikt, handig voor eenvoudige meldingen of waarschuwingen.

Belangrijke objecten binnen het BOM

Het window object vormt het fundament van het Browser Object Model, maar de echte kracht komt van de subobjecten die eraan verbonden zijn. Deze objecten geven je toegang tot specifieke functionaliteiten binnen de browser.

location object

Het location object bevat informatie over de huidige URL van de pagina en biedt methodes om de browser naar een andere locatie te sturen.

Voorbeelden:

console.log(window.location.href); // Volledige URL
window.location.href = "https://example.com"; // Navigeren naar een andere site

Je kunt ook gebruik maken van andere eigenschappen zoals:

• location.hostname (domeinnaam)

• location.pathname (het pad)

• location.search (query string)

navigator object

Het navigator object geeft informatie over de browser zelf en over bepaalde kenmerken van het apparaat.

Voorbeelden:

console.log(navigator.userAgent); // Browser en platform
console.log(navigator.language);  // Taal van de gebruiker

Veelgebruikte toepassingen zijn:

• Browserdetectie

• Taalinstellingen bepalen

• Controleren of bepaalde features ondersteund worden

screen object

Het screen object biedt gegevens over het fysieke scherm van de gebruiker, zoals breedte, hoogte en kleurendiepte. Dit is handig bij het optimaliseren van de gebruikersinterface voor verschillende schermgroottes.

Voorbeeld:

console.log(screen.width);  // Schermbreedte in pixels
console.log(screen.height); // Schermhoogte in pixels

Hoewel het screen object minder vaak wordt gebruikt in moderne responsive design-benaderingen (zoals via CSS media queries), kan het nog steeds relevant zijn in specifieke situaties, zoals fullscreen-modus of game-interfaces.

history object

Het history object laat je interactie hebben met de browsergeschiedenis. Hiermee kun je de gebruiker terugsturen naar een vorige pagina of vooruit navigeren in de sessiegeschiedenis.

Voorbeelden:

window.history.back();    // Ga terug naar de vorige pagina
window.history.forward(); // Ga naar de volgende pagina (indien beschikbaar)

Let op: vanwege beveiligings- en gebruiksvriendelijkheidsoverwegingen is het niet mogelijk om de volledige geschiedenis in te zien of aan te passen.

Praktische toepassingen van het BOM

Hoewel het Browser Object Model vaak op de achtergrond aanwezig is, speelt het in de praktijk een belangrijke rol bij het verbeteren van interactie en functionaliteit op websites. Hieronder bespreken we enkele veelvoorkomende toepassingen van het BOM in moderne webontwikkeling.

Pop-ups openen met window.open()

Met window.open() kun je een nieuw venster of tabblad openen. Dit wordt vaak gebruikt voor externe links, inlogschermen of printweergaves.

Voorbeeld:

window.open("https://voorbeeld.nl", "_blank");

Let op: Veel browsers blokkeren pop-ups als deze niet worden gestart door een directe gebruikersactie, zoals een klik. Gebruik ze dus met mate en alleen als het echt nodig is.

Pagina’s automatisch herladen

Het BOM biedt een eenvoudige manier om een pagina opnieuw te laden met location.reload():

window.location.reload();

Dit wordt gebruikt in situaties waar de pagina-inhoud moet worden ververst na een bepaalde actie, bijvoorbeeld na het verzenden van een formulier of bij foutafhandeling.

Gebruikerservaring personaliseren

Je kunt het BOM gebruiken om de ervaring af te stemmen op de gebruiker. Denk aan:

• Het aanpassen van inhoud op basis van schermgrootte (screen.width)

• Het tonen van meldingen op basis van taalinstellingen (navigator.language)

• Het opslaan van gebruikersdata in localStorage of sessionStorage

Voorbeeld:

if (navigator.language.startsWith("en")) {
  alert("Welkom op de Nederlandse versie van onze site!");
}

Navigatie en historie beheren

Met het history object kun je de gebruiker laten navigeren zonder dat je de volledige pagina opnieuw hoeft te laden. Dit is handig bij single-page applications (SPA’s), maar ook bij eenvoudige pagina’s waar teruggaan een logische stap is.

window.history.back(); // Ga één stap terug in de geschiedenis

Of om dynamisch de URL te updaten:

window.history.pushState({}, '', '/nieuw-pad');

Deze techniek wordt vaak gebruikt in combinatie met frameworks zoals React of Vue.

Beperkingen en aandachtspunten

Hoewel het Browser Object Model veel handige mogelijkheden biedt, zijn er ook beperkingen en aandachtspunten waar je als ontwikkelaar rekening mee moet houden. Zeker bij moderne webontwikkeling, waar veiligheid, gebruiksvriendelijkheid en compatibiliteit een grote rol spelen.

Beveiligingsrisico’s

Sommige functies binnen het BOM, zoals window.open() en window.alert(), kunnen worden misbruikt of als hinderlijk worden ervaren. Daarom hebben browsers verschillende beveiligingsmaatregelen ingebouwd:

• Pop-up blokkering: De meeste browsers blokkeren automatisch geopende vensters als ze niet door een directe gebruikersactie worden gestart.

• Cross-origin beperkingen: Je kunt via location of history niet zomaar navigeren of data uitlezen van andere domeinen. Dit voorkomt cross-site scripting (XSS).

• Beperkte toegang tot navigator: Sommige informatie is afgeschermd of onnauwkeurig weergegeven om fingerprinting te beperken.

Gebruik deze functies dus met beleid en vermijd agressieve of ongewenste interacties.

Browsercompatibiliteit

Omdat BOM niet officieel is gestandaardiseerd, kunnen er kleine verschillen bestaan tussen browsers. Moderne browsers zoals Chrome, Firefox, Safari en Edge ondersteunen vrijwel dezelfde BOM-functionaliteiten, maar oudere versies of nichebrowsers kunnen afwijkend gedrag vertonen.

Tip: Controleer browserondersteuning altijd via tools als MDN Web Docs of Can I use.

BOM in moderne JavaScript-frameworks

In moderne frameworks (zoals React, Vue of Angular) wordt direct gebruik van BOM vaak beperkt tot specifieke situaties, zoals:

• Het navigeren naar een externe link (window.location.href)

• Het openen van een helpvenster (window.open)

• Het opslaan van data in localStorage

Frameworks bieden vaak hun eigen methodes om bijvoorbeeld routing of state management te regelen. Toch blijft kennis van het BOM belangrijk voor die momenten waarop je buiten het kader van het framework moet werken.

De rol van BOM in moderne webontwikkeling

Het Browser Object Model blijft een relevant onderdeel van webontwikkeling, ook in een tijd waarin frameworks en libraries steeds meer abstractie bieden. BOM vormt de schakel tussen de webpagina en de browseromgeving en biedt toegang tot functies zoals navigatie, pop-ups, scherminformatie en geschiedenisbeheer.

Hoewel het gebruik van BOM in moderne projecten vaak beperkt is tot specifieke gevallen, is het goed om te begrijpen hoe deze objecten werken. Niet alleen voor directe toepassingen, maar ook voor debugging, browsergedrag te begrijpen of legacy code te onderhouden.

Kort samengevat:

• Het BOM bestaat uit het window object en zijn subobjecten zoals navigator, location, screen en history.

• Het stelt je in staat om te communiceren met de browseromgeving buiten de webpagina.

• Het gebruik vereist aandacht voor beveiliging, gebruiksvriendelijkheid en compatibiliteit.

• Zelfs in frameworks kan directe BOM-functionaliteit nodig zijn bij specifieke taken.

Een goed begrip van het Browser Object Model helpt je als ontwikkelaar om complete, functionele en gebruikersvriendelijke webapplicaties te bouwen.