Como obter o URL da página da web usando JavaScript
Vamos dar uma olhada nisso neste artigo.
O que é um URL?
Url (Localizador de recursos uniformes) é um caminho que permite acessar uma instância de página da web específica. O navegador reconhece o caminho e exibe a página da web necessária contra esse URL.
Antes de pular para obter o URL de uma página da web, precisamos ter um conhecimento básico de alguns objetos como:
- objeto de janela
- objeto de localização
- objeto href
Vamos ter um entendimento básico de cada um desses objetos.
Javascript Window Object
JavaScript usa o janela.localização.Href Para obter o URL da página. Aqui o objeto da janela é um objeto universal ou global que é basicamente a janela de um navegador e esse objeto de janela segura todos os objetos, funções e variáveis JavaScript também.
Objeto de localização do JavaScript
Localização Objeto contém todas as informações do URL atual da página da web, esse objeto pode ser acessado facilmente usando o janela. localização.
Javascript Href Object
O Href é uma propriedade que pode ser usada para definir ou devolver todo o URL da página da web atual em que estamos trabalhando. Esta propriedade é acessível sob o janela.localização.Href
Vamos dar uma olhada em todo o objeto e em seus aplicativos.
janela.localização.Href explicou
Em JavaScript, o Localização objeto mantém informações sobre o URL atual do documento, enquanto o Janela A interface é usada para acessar. Como resultado, você pode recuperar o Localização objetar o documento atual com Janela.localização. Em seguida, utilize a propriedade localização.Href para recuperar uma string contendo o URL inteiro.
O URL atual mostrado na barra de endereços do navegador da web pode ser recuperado usando uma variedade de técnicas de JavaScript. Você pode recuperar esses dados usando o atributo de objeto de localização do objeto da janela. A seguir, é apresentada uma lista de algumas das características do objeto de localização.
As operações que você pode fazer usando JavaScript estão listadas abaixo.
Exemplos de dados de URL recuperados usando janela.localização
Vamos dar um exemplo de URL 'https: // exp.com: 3737/obtenha?post = exp#Query 'e execute algumas operações.
| Operação | Resultados |
|---|---|
| janela.localização.Href | https: // exp.com: 3737/obtenha?post = exp#consulta |
| janela.localização.protocolo; | https: |
| janela.localização.hospedar | exemplo.com: 3737 |
| janela.localização.nome de anfitrião | Exp.com |
| janela.localização.porta | 3737 |
| janela.localização.Nome do caminho | pegar |
| janela.localização.consulta | ?post = exp |
Implementação do navegador
Discutimos acima, como podemos usar facilmente alguns dos objetos JavaScript embutidos para recuperar o URL e as informações que estão sob o URL como o nome do host, o nome do caminho, a consulta, etc. Agora, vamos praticamente testar como o janela.localização.Href Propriedade funciona e como podemos usá -lo para obter o URL da página da web com bastante facilidade.
JavaScript permite que você obtenha o URL de uma página da web usando seu janela.localização propriedade. Você pode simplesmente chamar o janela.localização.Href Propriedade que retornará a você o URL completo da página da web, incluindo nome de host, nome do caminho e string de consulta.
Vamos testar a propriedade JavaScript praticamente.
Aqui no código acima, criamos um botão, este botão possui um evento JavaScript anexado a ele que é acionado sempre que um botão é clicado pelo usuário. No evento JavaScript, estamos exibindo o URL da página da web atual em um alerta usando o janela.localização.Href, Este alerta contém a mensagem e o URL atual da página da web.
Saída do navegador:
Quando clicamos no botão, um alerta aparece que exibe o URL da página da web atual:
Aqui você pode ver que usamos janela.localização.Href Dentro do código para obter o URL da página da web e devolvê -lo ao navegador como um alerta. Então, sempre que você clicar no botão "Clique em mim", verá um alerta na tela com a mensagem que contém o URL da página da web atual.
Recuperação de dados de URL usando jQuery
Até agora, discutimos como podemos facilmente obter o URL da página da web usando o JavaScript's janela.localização.Href Propriedade, podemos alcançar a mesma funcionalidade com o jQuery, o que é fácil de implementar e também confiável.
As operações que você pode fazer usando jQuery estão listadas abaixo.
Vamos dar um exemplo de URL 'https: // exp.com: 3737/obtenha?post = exp#Query 'e execute algumas operações de jQuery nele.
| Operação | Resultados |
|---|---|
| $ (localização).attr ('href'); | https: // exp.com: 3737/obtenha?post = exp#consulta |
| $ (localização).attr ('protocolo'); | https: |
| $ (localização).attr ('host'); | exemplo.com: 3737 |
| $ (localização).attr ('hostname'); | Exp.com |
| $ (localização).attr ('porta'); | 3737 |
| $ (localização).attr ('pathname'); | pegar |
| $ (localização).att ('pesquisa'); | ?post = exp |
| $ (localização).attr ('hash'); | #consulta |
| $ (localização).attr ('origem'); |
Conclusão:
Em javascript, janela.localização.Href é a propriedade que você pode usar para recuperar o URL da página da web atual. Você pode buscar facilmente o URL da página atual e executar qualquer operação que desejar depois de pegar o URL. Neste artigo, vimos algumas operações que podemos executar no URL depois de pegá -lo e também demos uma olhada em como podemos implementar o método dentro de nosso código JavaScript para alcançar a funcionalidade.