Come ottenere l'URL della pagina web usando JavaScript
Diamo un'occhiata a questo in questo articolo.
Cos'è un URL?
URL (Localatore di risorse uniformi) è un percorso che consente di accedere a una particolare istanza della pagina Web. Il browser riconosce il percorso e visualizza la pagina web richiesta da tale URL.
Prima di saltare per ottenere l'URL di una pagina web, dobbiamo avere una conoscenza di base di un paio di oggetti come:
- Oggetto della finestra
- Oggetto di posizione
- oggetto href
Abbiamo una comprensione di base di ciascuno di questi oggetti.
Oggetto della finestra JavaScript
JavaScript usa il finestra.posizione.Href Per ottenere l'URL della pagina. Qui l'oggetto della finestra è un oggetto universale o globale che è fondamentalmente la finestra di un browser e questo oggetto finestra contiene anche tutti gli oggetti, le funzioni e le variabili JavaScript.
Oggetto di posizione JavaScript
Posizione L'oggetto contiene tutte le informazioni dell'URL corrente della pagina Web, è possibile accedere facilmente a questo oggetto utilizzando il finestra. posizione.
Oggetto javascript href
IL Href è una proprietà che può essere utilizzata per impostare o restituire l'intero URL della pagina Web corrente su cui stiamo lavorando. Questa proprietà è accessibile ai sensi del finestra.posizione.Href
Diamo un'occhiata all'intero oggetto e alle sue applicazioni.
finestra.posizione.ha spiegato Href
In JavaScript, il Posizione L'oggetto contiene informazioni sull'URL corrente del documento, mentre il Finestra L'interfaccia viene utilizzata per accedervi. Di conseguenza, puoi recuperare il Posizione oggetto per il documento corrente con Finestra.posizione. Quindi utilizzare la proprietà posizione.Href Per recuperare una stringa contenente l'intero URL.
L'attuale URL mostrato nella barra degli indirizzi del browser Web può essere recuperato utilizzando una varietà di tecniche JavaScript. È possibile recuperare questi dati utilizzando l'attributo dell'oggetto di posizione dell'oggetto della finestra. Quello che segue è un elenco di alcune delle caratteristiche dell'oggetto di posizione.
Le operazioni che puoi fare utilizzando JavaScript sono elencate di seguito.
Esempi di dati URL recuperati usando la finestra.posizione
Facciamo un esempio url 'https: // exp.com: 3737/get?post = exp#query 'ed esegui alcune operazioni su di esso.
| Operazione | Risultati |
|---|---|
| finestra.posizione.Href | https: // exp.com: 3737/get?Post = Exp#query |
| finestra.posizione.protocollo; | https: |
| finestra.posizione.ospite | esempio.com: 3737 |
| finestra.posizione.Nome host | Exp.com |
| finestra.posizione.porta | 3737 |
| finestra.posizione.Pathname | Ottenere |
| finestra.posizione.Domanda | ?Post = Exp |
Implementazione del browser
Abbiamo discusso sopra di come possiamo facilmente usare alcuni degli oggetti Javascript integrati per recuperare l'URL e le informazioni che giacciono sotto l'URL come il nome host, il percorso, la query, ecc. Ora, proveremo praticamente come il finestra.posizione.Href La proprietà funziona e come possiamo usarla per ottenere l'URL della pagina web abbastanza facilmente.
JavaScript ti consente di ottenere l'URL di una pagina web usando il suo finestra.posizione proprietà. Puoi semplicemente chiamare il finestra.posizione.Href Proprietà che ti restituirà l'URL completo della pagina Web, inclusi nome host, pathname e stringa di query.
Proviamo praticamente la proprietà JavaScript.
Qui nel codice sopra, abbiamo creato un pulsante, questo pulsante ha un evento JavaScript allegato ad esso che viene attivato ogni volta che un pulsante viene fatto clic dall'utente. Nell'evento JavaScript, stiamo visualizzando l'URL della pagina Web corrente in un avviso usando il finestra.posizione.Href, Questo avviso contiene il messaggio e l'URL corrente della pagina web.
Output del browser:
Quando facciamo clic sul pulsante, viene visualizzato un avviso che visualizza l'URL della pagina Web corrente:
Qui puoi vedere che abbiamo usato finestra.posizione.Href All'interno del codice per ottenere l'URL della pagina web e restituirlo nel browser come avviso. Quindi ogni volta che fai clic sul pulsante "Cliccami", vedrai un avviso sullo schermo con il messaggio contenente l'URL della pagina Web corrente.
Recupero dei dati URL utilizzando jQuery
Fino ad ora abbiamo discusso di come possiamo facilmente ottenere l'URL della pagina web usando i JavaScript finestra.posizione.Href Proprietà, possiamo ottenere anche la stessa funzionalità con il jQuery, che è facile da implementare e anche abbastanza affidabile.
Le operazioni che puoi fare utilizzando jQuery sono elencate di seguito.
Facciamo un esempio url 'https: // exp.com: 3737/get?post = exp#query 'ed esegui alcune operazioni jQuery su di esso.
| Operazione | Risultati |
|---|---|
| $ (posizione).attr ('href'); | https: // exp.com: 3737/get?Post = Exp#query |
| $ (posizione).attr ('protocollo'); | https: |
| $ (posizione).attr ('host'); | esempio.com: 3737 |
| $ (posizione).attr ('hostname'); | Exp.com |
| $ (posizione).attr ('port'); | 3737 |
| $ (posizione).attr ('pathname'); | Ottenere |
| $ (posizione).attr ('search'); | ?Post = Exp |
| $ (posizione).attr ('hash'); | #Query |
| $ (posizione).attr ('origine'); |
Conclusione:
In JavaScript, finestra.posizione.Href è la proprietà che è possibile utilizzare per recuperare l'URL della pagina Web corrente. Puoi facilmente recuperare l'URL della pagina corrente ed eseguire qualsiasi operazione tu voglia dopo aver preso l'URL. In questo articolo, abbiamo visto alcune operazioni che possiamo eseguire sull'URL dopo averlo preso e abbiamo anche dato un'occhiata a come possiamo implementare il metodo all'interno del nostro codice JavaScript per ottenere la funzionalità.