Ves al contingut principal

Objecte window

 L'Objecte window: L'Arrel del Navegador

L'objecte window és l'objecte global de JavaScript quan s'executa en un navegador web. No només representa la finestra oberta del navegador, sinó que també és el contenidor per a tots els altres objectes del BOM (com document, location, history, etc.) i per a les variables i funcions globals de JavaScript.

La Jerarquia (BOM i DOM)

La jerarquia del navegador i el document es construeix a partir de window:

  1. window (BOM): L'arrel. Representa la finestra/pestanya sencera.

  2. document (DOM): Fill de window. Representa el contingut HTML carregat dins d'aquesta finestra.

  3. Elements HTML: Fills de document. Representen etiquetes concretes (com <img>, <button>, etc.).

L'objecte window es pot ometre en la majoria de referències als seus fills (p. ex., window.document és el mateix que document, i window.alert() és alert()).

Exemple de Jerarquia (DOM)

L'accés directe a elements com document.img1 (utilitzant l'atribut name) és un mètode antic i no es recomana actualment. El mètode estàndard per accedir a elements és utilitzar el DOM (Document Object Model).

Mètode Antic (Desaconsellat) Mètode Modern (Recomanat)
console.log(document.img1.width); document.getElementById('id_de_la_imatge').width;

Codi HTML/JavaScript Modern:

HTML 

<!DOCTYPE html>
<html>
    <body>
        <img src="./muntanya.jpg" id="muntanyaImg" alt="Muntanya" />
        <script>
            // Accedim a l'objecte document a través de window
            const imatge = document.getElementById('muntanyaImg');
            
            // Accés a propietats de l'element <img>
            console.log("Amplada de la imatge:", imatge.width); 
            
            // Accés a una propietat de window (sense window.)
            console.log("URL de la pàgina:", location.href); 
        </script>
    </body>
</html>

Propietats Clau de l'Objecte window

Les propietats de window permeten obtenir informació sobre l'estat del navegador i del document.

Propietat Descripció Exemple Pràctic
document, location, history Són els objectes fonamentals del BOM que ja coneixes. console.log(document.title);
innerWidth, innerHeight Retornen l'amplada i altura de l'àrea visible (viewport) del navegador en píxels, excloent les barres d'eines, etc. console.log(window.innerWidth);
screenX, screenY Retornen la posició horitzontal i vertical de la finestra del navegador respecte a la pantalla de l'usuari. (També screenLeft/screenTop). console.log(window.screenX);
parent, top, self Utilitzades principalment per treballar amb iframes (marcs). parent és el pare immediat; top és la finestra superior (l'arrel de totes les subfinestres); self és la finestra actual (window). Permet trencar l'iframe: if (window !== window.top) { window.top.location.href = location.href; }
localStorage, sessionStorage Ofereixen un mecanisme per emmagatzemar dades de forma permanent (localStorage) o durant la sessió actual (sessionStorage) al navegador de l'usuari. localStorage.setItem('usuari', 'Jordi');
closed Retorna un valor booleà (true/false) indicant si la finestra ha estat tancada. if (myWindow.closed) { ... }
status, defaultStatus (Nota d'ús: Aquestes propietats estan àmpliament obsoletes o ignorades pels navegadors moderns per raons de seguretat i usabilitat).  

Exemple de Propietats (BOM):

JavaScript 

// La mida interior del viewport (la part de la web)
console.log(`Mida del viewport: ${window.innerWidth}x${window.innerHeight}`);

// La posició de la finestra a la pantalla
console.log(`Posició a la pantalla (X, Y): ${window.screenX}, ${window.screenY}`);

// Emmagatzemant una dada
window.localStorage.setItem('tema', 'fosc');
console.log(`Tema guardat: ${localStorage.getItem('tema')}`);

Mètodes Fonamentals de l'Objecte window

Els mètodes de window s'utilitzen per gestionar la finestra del navegador i la interacció amb l'usuari.

Mètodes d'Interacció amb l'Usuari

Mètode Propòsit Exemple Pràctic
alert(missatge) Mostra un missatge a l'usuari i espera que faci clic a OK. alert('Benvingut!');
confirm(missatge) Mostra un missatge i botons OK/Cancel. Retorna true o false. const volEsborrar = confirm('Estàs segur?');
prompt(missatge, [textDefecte]) Mostra un missatge i un camp de text per introduir dades. Retorna la dada introduïda o null si es cancel·la. const nom = prompt('Introdueix el teu nom:', 'Anònim');

Mètodes de Finestra i Temporització

Mètode Propòsit Exemple Pràctic
open(url, name, params) Crea una nova finestra (o pestanya) amb una URL i paràmetres de mida i aparença. Retorna una referència a la nova finestra. const popup = window.open('/avís.html', 'avís', 'width=400,height=200');
close() Tanca la finestra actual o una finestra creada per l'open(). popup.close();
setTimeout(funció, msec) Executa la funció una sola vegada després que passin els mil·lisegons (msec). const idTimer = setTimeout(() => { alert('Temps esgotat!'); }, 5000);
setInterval(funció, msec) Executa la funció repetidament cada msec mil·lisegons. const idInterval = setInterval(() => { console.log('Tick'); }, 1000);
clearTimeout(id) / clearInterval(id) Cancela l'execució pendent de setTimeout o setInterval, utilitzant la ID que retornen. clearTimeout(idTimer);

Exemple de Mètodes (Temporització):

JavaScript 

let comptador = 0;

// Configurar una funció que s'executa cada segon
const intervalId = setInterval(() => {
    comptador++;
    console.log(`Segons passats: ${comptador}`);
    
    // Aturar l'interval després de 5 segons
    if (comptador >= 5) {
        clearInterval(intervalId); // Atura el temporitzador
        console.log("Interval aturat.");
    }
}, 1000); 

// Una funció que s'executa només una vegada després de 100 mil·lisegons
setTimeout(() => {
    alert("Benvingut a la pàgina (amb setTimeout)");
}, 100);

window.open

El mètode window.open() és una funció de JavaScript que s'utilitza per obrir una nova finestra o una nova pestanya al navegador. Et permet especificar la URL a carregar, el nom de la finestra i una sèrie de característiques de visualització, com les dimensions i les barres d'eines.

Sintaxi i Paràmetres

La sintaxi completa de window.open() és:

JavaScript 
let novaFinestra = window.open(url, nomFinestra, especificacions, reemplaçarEntradaHistorial);

url (String)

  • Descripció: L'URL del document a carregar a la nova finestra.

  • Opcionalitat: Opcional. Si s'omet (o és una cadena buida ""), la nova finestra o pestanya es crea amb una pàgina en blanc (about:blank).

  • Exemple: 'https://www.exemple.cat/pagina.html'

nomFinestra (String)

  • Descripció: Un nom per a la nova finestra o pestanya.

  • Opcionalitat: Opcional.

  • Casos d'Ús:

    • Si el nom coincideix amb una finestra ja oberta, el contingut es recarrega en aquesta finestra existent en lloc d'obrir-ne una de nova.

    • Pots utilitzar valors especials com _blank (sempre obre una nova finestra o pestanya, per defecte) o _self (carrega l'URL a la finestra actual, actuant com una navegació normal).

  • Exemple: 'popupLogin'

especificacions (String)

  • Descripció: Una cadena separada per comes que defineix les dimensions i característiques visuals de la nova finestra. Aquest paràmetre només té efecte real si el navegador obre una finestra nova, no una pestanya.

  • Opcionalitat: Opcional.

  • Exemples Comuns de Característiques:

    • width=W: Amplada de la finestra en píxels.

    • height=H: Alçada de la finestra en píxels.

    • left=X, top=Y: Posició de la finestra a la pantalla.

    • resizable=yes/no: Si l'usuari pot redimensionar la finestra (sovint ignorat).

    • toolbar=yes/no: Mostra o amaga la barra d'eines del navegador (sovint ignorat).

  • Exemple: 'width=600,height=400,left=100,top=100,resizable=no'

reemplaçarEntradaHistorial (Boolean)

  • Descripció: Indica si l'URL que s'està obrint ha de reemplaçar l'entrada actual a l'historial de la nova finestra.

  • Opcionalitat: Opcional (valor per defecte: false).

  • Cas d'Ús: S'utilitza rarament. Si es posa a true, la funció funciona de manera similar a location.replace() dins de la nova finestra.

Valor de retorn

El mètode window.open() retorna una referència a la nova finestra (objecte window).

  • Si l'obertura té èxit, la variable novaFinestra contindrà l'objecte de la finestra emergent, permetent-te interactuar amb ella des del script original (p. ex., cridar funcions o tancar-la).

  • Si l'obertura és bloquejada per un pop-up blocker, retorna null.

Restriccions importants (bloquejadors de Pop-ups)

La majoria dels navegadors tenen estrictes polítiques de bloqueig de pop-ups per millorar l'experiència d'usuari:

  1. Activació per Usuari: Perquè window.open() funcioni correctament i no sigui bloquejat, ha de ser cridat directament dins d'una funció que es desencadena per una interacció de l'usuari (p. ex., un click d'un botó o una pulsació de tecla).

  2. Temps d'Espera: Si intentes cridar window.open() després d'un setTimeout o d'una promesa asíncrona, serà molt probablement bloquejat.

Exemples i casos d'ús

Obrir una nova pestanya

Aquesta és la forma més comuna d'usar window.open() avui dia, ja que la majoria de navegadors ignoren les especificacions i obren una pestanya.

JavaScript 
document.getElementById('obrirPestanya').addEventListener('click', () => {
    // La majoria de navegadors ignoren el 'pop-up' i obren una pestanya
    window.open('https://www.google.com', '_blank'); 
});

Obrir una finestra centrada amb dimensions específiques

En alguns navegadors i configuracions, això pot obrir una finestra petita sense barra de navegació, ideal per a diàlegs o logotypes.

JavaScript 
function obrirLogin() {
    const ample = 400;
    const altura = 500;
    const esquerra = (screen.width / 2) - (ample / 2);
    const superior = (screen.height / 2) - (altura / 2);
    
    const especificacions = `width=${ample},height=${altura},left=${esquerra},top=${superior},resizable=no,toolbar=no,menubar=no`;

    // Intentem obrir la finestra de login, donant-li el nom 'loginWin'
    const loginWindow = window.open('login.html', 'loginWin', especificacions);

    if (loginWindow === null) {
        alert("El bloquejador de pop-ups ha impedit obrir la finestra de login.");
    }
}

Comunicació entre finestres

Utilitzant la referència retornada (novaFinestra), el script original pot interactuar amb el contingut de la nova finestra (si ambdues estan al mateix origen).

JavaScript 
let popup;

document.getElementById('obrir').addEventListener('click', () => {
    popup = window.open('salutacio.html', 'salutacio', 'width=300,height=200');
});

document.getElementById('enviarMissatge').addEventListener('click', () => {
    if (popup && !popup.closed) {
        // Crida una funció definida dins de salutacio.html (si tenen el mateix origen)
        popup.mostrarMissatge('Hola des de la finestra principal!');
    }
});

Amunt