Il campo dell'indirizzo nel browser si trova solitamente nella parte superiore della finestra e visualizza l'URL del documento scaricato. Se l'utente desidera navigare manualmente verso una pagina (digitarne l'URL), lo fa nel campo dell'indirizzo.

Riso. 4.2.

La proprietà location dell'oggetto window è essa stessa un oggetto della classe Location. La classe Location, a sua volta, è una sottoclasse della classe URL, che include anche oggetti delle classi Area e Link. Gli oggetti posizione ereditano tutte le proprietà degli oggetti URL, consentendo di accedere a qualsiasi parte dello schema URL. Tratteremo la classe dell'oggetto URL in modo più dettagliato in "Programmazione della navigazione ipertestuale" .

Per compatibilità con versione precedente JavaScript, il linguaggio supporta anche la proprietà window.document. location , che attualmente duplica completamente la finestra. location con tutte le sue proprietà e metodi. Consideriamo ora le proprietà ei metodi dell'oggetto finestra. location (non ci sono eventi associati a questo oggetto).

proprietà dell'oggetto posizione

Sono più facili da dimostrare con un esempio. Supponiamo che il browser visualizzi una pagina situata in:

Quindi le proprietà dell'oggetto posizione assumeranno i seguenti valori:

window.location.href = "http://www.site.ru:80/dir/page.cgi?product=phone&id=3#mark" window.location.protocol = "http:" window.location.hostname = " www.site.ru" window.location.port = 80 window.location.host = "www.site.ru:80" window.location.pathname = "dir/page.cgi" window.location.search = "?prodotto =phone&id=3" window.location.hash = "#mark"

Come accennato nelle lezioni precedenti, è possibile accedere alle proprietà degli oggetti sia utilizzando la notazione con punto (come sopra), sia utilizzando la notazione tra parentesi, ad esempio: window. posizione [" host "] .

Metodi dell'oggetto location

I metodi dell'oggetto location hanno lo scopo di controllare il caricamento e il ricaricamento della pagina. Questo controllo sta nel fatto che puoi ricaricare il documento corrente (method reload () ), o caricarne uno nuovo (method replace () ).

window.location.reload(true);

Il metodo reload() modella completamente il comportamento del browser quando si fa clic sul pulsante Ricarica nella barra degli strumenti. Se chiami il metodo senza un argomento o lo imposti su true , il browser controllerà l'ora dell'ultima modifica del documento e lo caricherà dalla cache (se il documento non è stato modificato) o dal server. Questo comportamento corrisponde alla semplice pressione del pulsante Ricarica del browser (il tasto F5 in Internet Explorer). Se specifichi false come argomento, il browser ricaricherà il documento corrente dal server, qualunque cosa accada. Questo comportamento corrisponde alla pressione contemporanea del tasto Maiusc e del pulsante Ricarica del browser (o Ctrl+F5 in Internet Explorer ).

Utilizzando l'oggetto posizione, vai a nuova pagina si può fare in due modi:

window.location.href="http://www.newsite.ru/"; window.location.replace("http://www.newsite.ru/");

La differenza tra loro è la visualizzazione di questa azione nella finestra della cronologia della pagina. storia. Nel primo caso, verrà aggiunta una nuova voce alla cronologia di navigazione contenente l'indirizzo "http://www.newsite.ru/", in modo che, se lo desideri, puoi fare clic sul pulsante Indietro nella barra del browser per tornare alla pagina precedente. Nel secondo caso, il nuovo indirizzo "http://www.newsite.ru/" sostituirà il precedente nella cronologia delle visite, e non sarà più possibile tornare alla pagina precedente premendo il pulsante Indietro.

Cronologia delle visite (cronologia)

Cronologia di navigazione delle pagine del mondo ampia rete Consente all'utente di tornare a una pagina visualizzata in precedenza nella finestra del browser corrente. La cronologia di navigazione in JavaScript viene trasformata in un oggetto finestra. storia. Questo oggetto punta a un array di URL che l'utente ha visitato e a cui può accedere selezionando Go mode dal menu del browser. I metodi dell'oggetto cronologia consentono di caricare le pagine utilizzando l'URL in questo array.

Per evitare problemi di sicurezza del browser, puoi navigare nella Cronologia solo utilizzando il file index. Allo stesso tempo, l'URL, come stringa di testo, non è disponibile per il programmatore. Molto spesso questo oggetto viene utilizzato in esempi o pagine che possono essere collegate da più pagine diverse, supponendo che tu possa tornare alla pagina da cui verrà caricato l'esempio:

Questo codice visualizza un pulsante "Indietro", cliccando sul quale si tornerà alla pagina precedente. Il metodo della storia funziona in modo simile. forward() , portandoci alla successiva pagina visitata.

C'è anche un metodo go() che accetta un argomento intero e ti permette di saltare qualche passo avanti o indietro nella cronologia di navigazione. Ad esempio, history .go(-3) ci riporterà 3 passi indietro nella cronologia di navigazione. In questo caso, i metodi back() e forward() sono equivalenti al metodo go() con argomenti -1 e 1 , rispettivamente. La cronologia delle chiamate .go(0) ricaricherà la pagina corrente.

Tipo di browser (navigatore)

Spesso è necessario impostare una pagina per uno specifico programma di visualizzazione (browser). In questo caso sono possibili due opzioni: determinare il tipo di browser lato server o lato client. Per quest'ultima opzione, c'è un oggetto finestra nell'arsenale di oggetti di JavaScript. navigatore. Le proprietà più importanti di questo oggetto sono elencate di seguito.

Considera un semplice esempio per determinare il tipo di visualizzatore.

Fonte: http://learn.javascript.ru/browser-objects

navigatore: piattaforma e browser

L'oggetto navigator contiene informazioni generali sul browser e sul sistema operativo. Due proprietà sono particolarmente degne di nota:

• navigator.userAgent - contiene informazioni sul browser.
• navigator.platform - contiene informazioni sulla piattaforma, permette di distinguere tra Windows/Linux/Mac, ecc.

alert(navigatore.userAgent); alert(navigatore.piattaforma); schermo

L'oggetto schermo contiene informazioni generali sullo schermo, inclusa la risoluzione, il colore e così via. Può essere utile per determinare su quale codice è in esecuzione dispositivo mobile con bassa risoluzione.

L'attuale risoluzione orizzontale/verticale dello schermo del visitatore è in screen.width / screen.height .

Questa proprietà può essere utilizzata per raccogliere informazioni statistiche sui visitatori.

Il codice JavaScript dei contatori legge queste informazioni e le invia al server. Ecco perché puoi visualizzare nelle statistiche quanti visitatori sono arrivati ​​con quale schermata.

posizione

L'oggetto location fornisce informazioni sull'URL corrente e consente a JavaScript di reindirizzare il visitatore a un URL diverso. Il valore di questa proprietà è un oggetto di tipo Location .

Metodi di localizzazione e proprietà

Il metodo più importante è, ovviamente, toString . Restituisce l'URL completo.

Il codice che deve eseguire un'operazione di stringa in posizione deve prima eseguire il cast dell'oggetto su una stringa. Ecco come sarà l'errore:

// ci sarà un errore, perché location non è una stringa alert(window .location.indexOf("://" ));

E questo è corretto:

// porta alla riga prima di indexOf alert((window .location + "" ).indexOf("://" ));

Tutte le seguenti proprietà sono stringhe. La colonna "Esempio" contiene i loro valori per l'URL del test:

Metodi oggetto posizione

assegna(url) carica il documento all'url dato. Puoi anche semplicemente equiparare window.location.href = url .

reload() per ricaricare il documento all'URL corrente. L'argomento forceget è un valore booleano, se è vero, il documento viene sempre ricaricato dal server, se falso o non specificato, il browser può prelevare la pagina dalla sua cache.

replace(url) sostituisce il documento corrente con il documento all'URL specificato.

toString() Restituisce una rappresentazione in forma di stringa dell'URL.

Se modifichi qualsiasi proprietà di window.location diversa da hash , il documento verrà ricaricato come se il metodo window.location.assign() fosse stato chiamato sull'URL modificato.

Puoi anche reindirizzare assegnando esplicitamente location , ad esempio:

// il browser caricherà la pagina http://javascript.ru window .location = "http://javascript.ru" ; cornici

Una raccolta contenente frame e iframe. Puoi rivolgerti a loro sia per numero che per nome.

frames contiene oggetti finestra di frame secondari. Il codice seguente traduce il frame in un nuovo URL:

window.frames.example.location = "http://example.com" ; storia

L'oggetto cronologia consente di modificare l'URL senza ricaricare la pagina (all'interno dello stesso dominio) utilizzando l'API della cronologia, oltre a reindirizzare il visitatore avanti e indietro nella cronologia.

L'oggetto cronologia non fornisce un modo per leggere la cronologia di navigazione. È possibile rimandare indietro il visitatore chiamando history.back() o inoltrare chiamando history.forward() , ma il browser non fornisce l'indirizzo stesso per motivi di sicurezza.

Totale

Oggetti browser:

• navigatore, schermo Contiene informazioni sul browser e sullo schermo.
• location Contiene informazioni sull'URL corrente e consente di modificarlo. Qualsiasi modifica diversa dall'hash ricaricherà la pagina. Puoi anche ricaricare la pagina dal server chiamando location.reload(true) .
• frame Contiene una raccolta di oggetti finestra per ciascuno dei frame secondari. Ogni fotogramma è disponibile per numero (da zero) o per nome, che di solito è più conveniente.
• cronologia Consente di inviare il visitatore alla pagina precedente/successiva nella cronologia, nonché di modificare l'URL senza ricaricare la pagina utilizzando l'API della cronologia.

Questo oggetto è puramente informativo. Fornisce informazioni sul browser.

Come esempio di utilizzo del navigatore, mostriamo tutte le proprietà del browser:

< script type= "text/javascript" >documento. scriviln(); for (proprietà var in navigator) ( document. write ("" + property+ ":" ); document. writeln (navigator[ property]); ) oggetto cronologia

Responsabile di 2 pulsanti: 'avanti' e 'indietro'. Il browser, seguendo il collegamento da una pagina all'altra, salva la cronologia di queste transizioni. Quelli. Puoi tornare indietro di una pagina o andare avanti di una pagina. Puoi simulare la pressione di questi pulsanti da JavaScript utilizzando metodi e proprietà.

L'oggetto ha una proprietà - length - length.

L'oggetto ha metodi: go(), back(), forward().

Considera un esempio:

< script type= "text/javascript>function length()( //mostra il numero di transizioni alert(" Numero di transizioni: "+history.length);) function back()( //vai indietro history.back();) function forward()( // vai avanti a 1 transizione history.forward();) Oggetto posizione

Responsabile di barra degli indirizzi. Consente di ottenere e modificare l'indirizzo della pagina. Non appena l'indirizzo cambia, il browser passa automaticamente al nuovo indirizzo. Quelli. puoi simulare un salto a un indirizzo.

Ci sono proprietà:

• hash - etichetta.
• host - nome host + porta.
• hostname è www e.ru nell'indirizzo del sito.
• href - contiene la barra degli indirizzi. Qui puoi scrivere un altro indirizzo e il browser andrà a questo indirizzo.
• pathname è la pagina stessa.
• port - il post da utilizzare.
• il protocollo è http:// o ftp://.
• ricerca - opzioni dopo il punto interrogativo.

Ci sono metodi:

• assegna () - salta all'indirizzo specificato.
• reload() - simula la pressione del pulsante 'refresh'.
• replace () - vai all'indirizzo specificato, ma non c'è il pulsante Indietro nella pagina aperta, ad es. non salva questa pagina nella cronologia.

oggetto schermo

Questo è puramente informativo. Indica la dimensione dello schermo dell'utente in pixel. Non ha metodi, solo proprietà:

• availHeight - altezza dello schermo disponibile.
• availWidth - larghezza dello schermo disponibile.
• colorDepth è il numero di bit per memorizzare i colori (attualmente non utilizzato).
• height - altezza dello schermo dell'utente.
• width - la larghezza dello schermo dell'utente.
• updateInterval - Frequenza di aggiornamento dello schermo CRT (non utilizzata).

L'oggetto navigator contiene informazioni sul browser dell'utente ( in particolare - è disponibile utilizzo dei cookie file e se il supporto Java è abilitato).

L'oggetto navigatore permette anche di definire il tipo sistema operativo.

Per comodità di lavorare con l'oggetto navigatore, mostriamo tutte le sue proprietà sullo schermo. Ricordiamo il materiale della lezione precedente.

var qualsiasi ;

/* Passa in rassegna le proprietà dell'oggetto navigator */
for(qualsiasi nel navigatore )
{
documento.write(qualsiasi + "
" );
}

Informazioni sul browser: proprietà userAgent;

Lingua del browser - lingua delle proprietà;

Il nome del sistema operativo è una proprietà di oscpu ;

Se i cookie sono abilitati - proprietà cookieEnable d;

Se l'utente è connesso a Internet - proprietà onLine.

Le proprietà dell'oggetto navigator sono accessibili tramite un punto.

document .write ("Nome browser: " + navigator .userAgent + "
" );
document .write ("Lingua del browser: " + navigator .language + "
" );
document .write ("Nome del sistema operativo: " + navigator .oscpu + "
" );
document .write ("I cookie sono abilitati: " + navigatore .cookieEnable d + "
" );
document .write ("Connessione di rete: " + navigatore .onLine + "
" );

L'oggetto schermo ti aiuterà a ottenere dati sulla risoluzione dello schermo dell'utente, la profondità del colore, ecc.

Facciamo lo stesso con l'oggetto screen: per prima cosa, visualizza tutte le sue proprietà sullo schermo.

var qualsiasi ; /* Variabile arbitraria */

/* Passa in rassegna le proprietà dell'oggetto screen */
per (qualsiasi schermo)
{
documento.write(qualsiasi + "
" );
}

Ora, utilizzando le proprietà di altezza e larghezza dell'oggetto schermo, otteniamo informazioni sulla risoluzione dello schermo: la sua altezza e larghezza in pixel. E anche sulla profondità di bit palette dei colori- proprietà colorDepth.

document .write ("Altezza dello schermo: " + screen .height + "px
" );
document .write ("Larghezza dello schermo: " + screen .width + "px
" );

document .write ("Profondità colore: " + screen .colorDepth + "
" );

L'oggetto location restituisce l'URL della finestra corrente dell'utente.

Contiene anche dati su parti e componenti dell'indirizzo corrente: nome host, numero di porta, protocollo, ecc.

Proprietà dell'oggetto posizione.

var qualsiasi ; /* Variabile arbitraria */

/* Passa in rassegna le proprietà dell'oggetto posizione */
per (qualsiasi in posizione)
{
documento.write(qualsiasi + "
" );
}

Usiamo la proprietà href dell'oggetto location per visualizzare l'URL del documento corrente.

document.write ("URL: " + posizione .href );

Facciamo i compiti per questa lezione.

Scopri da quale browser la persona è arrivata alla tua pagina e, a seconda del browser, visualizza sullo schermo:

Se firefox: "Il tuo browser Firefox".
Se opera: "Il tuo browser è Opera".
Se chrome: "Il tuo browser Chrome".

Per risolvere questo compito è necessario:

Utilizzare la proprietà userAgent dell'oggetto navigator per ottenere informazioni sul browser corrente.

Al momento della risoluzione di questo problema, ho ricevuto i seguenti dati su Browser Firefox, Opera e Chrome.

Mozilla/5.0 (Windows NT 6.1; WOW64; versione:56.0) Gecko/20100101 Firefox /56.0

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, come Gecko) Chrome /61.0.3163.100 Safari/537.36 OPR /48.0.2685.39

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, come Gecko) Chrome /61.0.3163.100 Safari/537.36

Usa le espressioni regolari per trovare i nomi dei browser dalle loro informazioni.

var browser = navigator.userAgent ; /* Informazioni sul browser corrente */

/* Componi espressioni regolari per cercare corrispondenze nei dati del browser */
varregV_1 = /firefox/ i ; /* i - modello senza distinzione tra maiuscole e minuscole */
varregV_2 = /chrome/ i ;
varregV_3 = /opr/ i ;

/* Imposta le condizioni */
if (browser .match (regV_1 ) != null )
{
document.write("Il tuo browser è Firefox" );
}

/* Qui prendiamo in considerazione che Chrome è presente nella descrizione di Opera */
else if(browser .match (regV_2 ) != null && browser .match (regV_3 ) != "OPR" )
{
document.write("Il tuo browser è Chrome");
}

else if(browser .match (regV_3 ) != null )
{
document.write("Il tuo browser è Opera" );
}

altro
{
document.write("Stai utilizzando un browser NON conosciuto" );