Obter URL atual com jQuery?

1830

Estou usando jQuery. Como obtenho o caminho do URL atual e o atribuo a uma variável?

URL de exemplo:

http://localhost/menuname.de?foo=bar&amp;number=0

javascript jquery url venkatachalam
fonte

1

você também pode ver tech-blog.maddyzone.com/javascript/…

Rituraj ratan

4

Eu acho que a pergunta deve ser restaurada para solicitar o jQuery, já que existe uma resposta para isso, independentemente de o jQuery ser necessário para realizar a tarefa.

goodeye

1

possível duplicata de Obter URL atual com JavaScript?

vimal1083

3

@ goodeye Não, não há uma maneira jQuery para obter a localização; como no rastreador de erros do jQuery: »Pode ter funcionado, mas nunca foi suportado ou documentado. Simplesmente use document.location.href, que é mais rápido, mais simples e mais fácil de entender. «Em outras palavras, algumas pessoas usaram o jQuery para obter a localização, mas confiaram em um bug, e não em um recurso. Veja: bugs.jquery.com/ticket/7858

feeela

2520

Para obter o caminho, você pode usar:

var pathname = window.location.pathname; // Returns path only (/path/example.html)
var url      = window.location.href;     // Returns full URL (https://example.com/path/example.html)
var origin   = window.location.origin;   // Returns base URL (https://example.com)

Ryan Doherty
fonte

79

Propriedades do objeto local: developer.mozilla.org/en/DOM/window.location

bentford

100

Longe de matá-lo, o jQuery deu ao Javascript uma nova vida. Os novos programadores de C # / Java entendem ponteiros? Não. Eles precisam? Na verdade, as abstrações mais recentes são poderosas o suficiente para que isso não importe ..

flesh

199

"Como faço para XYZ no jQuery" e a resposta como javascript simples é bastante comum. Você pode saber como fazer algo em javascript simples; no entanto, devido a inconsistências no navegador, você pode preferir fazê-lo da maneira "jQuery". Lembro-me de pré-jQuery ou framework. Primeiro, eu checava o navegador e depois fazia o que queria de várias maneiras. O jQuery também está matando o js simples ... sim, graças a Deus, mas também o está tornando utilizável.

Parris

9

isso não funciona para o URL completo. por exemplo. para " mail.google.com/mail/u/0/#mbox/13005b79fe72f448 ", isso retornará apenas / mail / u / 0

dwaynemac

12

Ummm, ... window.location.pathname apenas obtém o URL no "?" e não obtém os parâmetros de consulta conforme solicitado na pergunta.

johntrepreneur

816

No estilo jQuery puro:

$(location).attr('href');

O objeto de localização também possui outras propriedades, como host, hash, protocolo e nome do caminho.

Boris Guéry
fonte

52

Aparentemente, usando $ (local) em jQuery não é suportada e desaconselhadas: bugs.jquery.com/ticket/7858

Peter

10

@ Peter Bug fechado como inválido.

kevinji

21

@ mc10: a parte "inválida" se aplica à solicitação de suporte a $ (local); isso NÃO deve ser usado.

31511 Peter

6

Esta resposta não é necessária e a pergunta e a resposta podem ser atualizadas para não usar o jquery. Os motivos podem ser encontrados aqui bugs.jquery.com/ticket/7858#comment:4

Vishwanath

8

@HaralanDobrev: Você não deve poder fazer .attr()no local. (1) Não é um elemento, por isso $(location)é obscuro, na melhor das hipóteses, e (2) mesmo que funcionasse, você deveria estar usando .prop()para obter propriedades. .attr()é para atributos HTML.

cHao 20/05

471

http://www.refulz.com:8082/index.php#tab2?foo=789

Property    Result
------------------------------------------
host        www.refulz.com:8082
hostname    www.refulz.com
port        8082
protocol    http:
pathname    index.php
href        http://www.refulz.com:8082/index.php#tab2
hash        #tab2
search      ?foo=789

var x = $(location).attr('<property>');

Isso funcionará apenas se você tiver jQuery. Por exemplo:

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
  $(location).attr('href');      // http://www.refulz.com:8082/index.php#tab2
  $(location).attr('pathname');  // index.php
</script>
</html>

rizon
fonte

13

É a mesma explicação que a anterior, mas com todo o elemento do objeto. Ótima resposta.

Oskar Calvo

4

Deve ser em /index.phpvez do index.phpnome do caminho.

Andrea Andrea

4

O jQuery +1 é o código de melhor qualidade de todos os tempos, se você não o usar, é um idiota. jQuery é definitivamente o caminho a percorrer. </sarcasm>

Oriol

2

De acordo com bugs.jquery.com/ticket/7858, isso está funcionando apenas por acidente. Além disso, attrdeve ser usado apenas em objetos DOM, para coisas que podem ser definidas usando atributos HTML.

precisa saber é o seguinte

69

Se você precisar dos parâmetros de hash presentes no URL, window.location.hrefpode ser uma escolha melhor.

window.location.pathname
=> /search

window.location.href 
 => www.website.com/search#race_type=1

jlfenaux
fonte

3

Se alguém precisa apenas de hash tag que pode chamar window.location.href

Amit Patel

15

Acho que @AmitPatel significawindow.location.hash

ptim

53

Você deseja usar o window.locationobjeto interno do JavaScript .

clawr
fonte

3

isso não retornará itens após '?' no local.

Majid

O @majidgeek funciona para mim no Firefox, Chrome e IE. Você pode fornecer um caso de teste dessa quebra?

Barney

3

pode confirmar pelo menos no console que window.location.pathnamenão recupera nada depois do?

WORC

45

Basta adicionar esta função no JavaScript e ela retornará o caminho absoluto do caminho atual.

function getAbsolutePath() {
    var loc = window.location;
    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
}

Espero que funcione para você.

Neville Bonavia
fonte

1

Isso ajudou muito para um script em que eu tinha preguiçosamente alguns URLs básicos codificados. Eu prefiro não ter o '/' à direita na raiz e inseri-lo no caminho, então fiz apenas a segunda linhavar pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/'));

cogdog

40

window.location é um objeto em javascript. retorna os seguintes dados

window.location.host          #returns host
window.location.hostname      #returns hostname
window.location.path          #return path
window.location.href          #returns full current url
window.location.port          #returns the port
window.location.protocol      #returns the protocol

em jquery você pode usar

$(location).attr('host');        #returns host
$(location).attr('hostname');    #returns hostname
$(location).attr('path');        #returns path
$(location).attr('href');        #returns href
$(location).attr('port');        #returns port
$(location).attr('protocol');    #returns protocol

Gaurav
fonte

1

que tal windo.location.origin?

Ali Sheikhpour

30

Esta é uma questão mais complicada do que muitos podem pensar. Vários navegadores suportam objetos de localização JavaScript embutidos e parâmetros / métodos associados acessíveis através de window.locationou document.location. No entanto, diferentes tipos de Internet Explorer (6,7) não oferecem suporte a esses métodos da mesma maneira, ( window.location.href? window.location.replace()Não suportado); portanto, você deve acessá-los de maneira diferente, escrevendo código condicional o tempo todo para segurar o Internet Explorer manualmente.

Portanto, se você tiver o jQuery disponível e carregado, poderá usar o jQuery (local), como os outros mencionados, porque resolve esses problemas. Se, no entanto, você estiver fazendo, por exemplo, um redirecionamento de geolocalização do lado do cliente via JavaScript (ou seja, usando a API do Google Maps e os métodos de objeto de localização), não convém carregar a biblioteca jQuery inteira e escrever seu código condicional que verifica todas as versões do Internet Explorer / Firefox / etc.

O Internet Explorer deixa o gato de codificação front-end infeliz, mas o jQuery é um prato de leite.

negutron
fonte

Adicionalmente: bugs.jquery.com/ticket/8138 . Na fonte do jQuery 1.8.0, há um comentário: // # 8138, o IE pode lançar uma exceção ao acessar // um campo de window.location se document.domain tiver sido definido.

Jan Święcki 30/11/2012

28

Apenas para o nome do host, use:

window.location.hostname

Mahmoud Farahat
fonte

24

O java-script fornece muitos métodos para recuperar o URL atual que é exibido na barra de endereços do navegador.

URL de teste:

http://
stackoverflow.com/questions/5515310/get-current-url-with-jquery/32942762
?
rq=1&page=2&tab=active&answertab=votes
#
32942762

resourceAddress.hash();
console.log('URL Object ', webAddress);
console.log('Parameters ', param_values);

Função:

var webAddress = {};
var param_values = {};
var protocol = '';
var resourceAddress = {

    fullAddress : function () {
        var addressBar = window.location.href;
        if ( addressBar != '' && addressBar != 'undefined') {
            webAddress[ 'href' ] = addressBar;
        }
    },
    protocol_identifier : function () { resourceAddress.fullAddress();

        protocol = window.location.protocol.replace(':', '');
        if ( protocol != '' && protocol != 'undefined') {
            webAddress[ 'protocol' ] = protocol;
        }
    },
    domain : function () {      resourceAddress.protocol_identifier();

        var domain = window.location.hostname;
        if ( domain != '' && domain != 'undefined' && typeOfVar(domain) === 'string') {
            webAddress[ 'domain' ] = domain;
            var port = window.location.port;
            if ( (port == '' || port == 'undefined') && typeOfVar(port) === 'string') {
                if(protocol == 'http') port = '80';
                if(protocol == 'https') port = '443';           
            }
            webAddress[ 'port' ] = port;
        }
    },
    pathname : function () {        resourceAddress.domain();

        var resourcePath = window.location.pathname;
        if ( resourcePath != '' && resourcePath != 'undefined') {
            webAddress[ 'resourcePath' ] = resourcePath;
        }
    },
    params : function () {      resourceAddress.pathname();

        var v_args = location.search.substring(1).split("&");

        if ( v_args != '' && v_args != 'undefined')
        for (var i = 0; i < v_args.length; i++) {
            var pair = v_args[i].split("=");

            if ( typeOfVar( pair ) === 'array' ) {
                param_values[ decodeURIComponent( pair[0] ) ] = decodeURIComponent( pair[1] );
            }
        }
        webAddress[ 'params' ] = param_values;
    },
    hash : function () {        resourceAddress.params();

        var fragment = window.location.hash.substring(1);
        if ( fragment != '' && fragment != 'undefined')
            webAddress[ 'hash' ] = fragment;        
    }
};
function typeOfVar (obj) {
      return {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
}

protocolo « Os navegadores da Web usam o Protocolo da Internet seguindo algumas regras de comunicação entre os Aplicativos Hospedados na Web e o Cliente da Web (Navegador). (http = 80 , https (SSL) = 443 , ftp = 21 etc.)

EX: com números de porta padrão

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/

(//) «Host é o nome dado a um ponto final (máquina na qual o recurso vive) na Internet. www.stackoverflow.com - Endereço IP DNS de um aplicativo (OR) localhost: 8080 - localhost

Os nomes de domínio são registrados pelas regras e procedimentos da árvore do sistema de nomes de domínio (DNS). Servidores DNS de alguém que gerencia seu domínio com endereço IP para fins de endereçamento. Na hierarquia do servidor DNS, o nome raiz de um stackoverlfow.com é com.

gTLDs      - com « stackoverflow (OR) in « co « google

Sistema local que você precisa para manter domínios que não são PÚBLICOS nos Arquivos do Host. localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

(/) «O caminho fornece informações sobre o recurso específico no host que o cliente da Web deseja acessar
(?) «Uma consulta opcional é passar uma sequência de pares atributo-valor separados por um delimitador (&).
(#) «Um fragmento opcional geralmente é um atributo de id de um elemento específico, e os navegadores da web rolarão esse elemento para exibição.

Se o parâmetro tiver uma época ?date=1467708674 , use.

var epochDate = 1467708674; var date = new Date( epochDate );

URL

URL de autenticação com nome de usuário: senha, se usernaem / password contiver @ símbolo
como:

Username = `my_email@gmail`
Password = `Yash@777`

Você precisa codificar o URL @como %40. ^Referir...

http://my_email%40gmail.com:Yash%[email protected]_site.com

encodeURI()(vs) encodeURIComponent()exemplo

var testURL = "http:my_email@gmail:Yash777@//stackoverflow.com?tab=active&page=1#32942762";

var Uri = "/:@?&=,#", UriComponent = "$;+", Unescaped = "(-_.!~*')"; // Fixed
var encodeURI_Str = encodeURI(Uri) +' '+ encodeURI( UriComponent ) +' '+ encodeURI(Unescaped);
var encodeURIComponent_Str =  encodeURIComponent( Uri ) +' '+ encodeURIComponent( UriComponent ) +' '+ encodeURIComponent( Unescaped );
console.log(encodeURI_Str, '\n', encodeURIComponent_Str);
/*
 /:@?&=,# +$; (-_.!~*') 
 %2F%3A%40%3F%26%3D%2C%23 %2B%24%3B (-_.!~*')
*/

Yash
fonte

23

Isso também funcionará:

var currentURL = window.location.href;

Suresh Pattu
fonte

Isso fornece o URL completo que a maioria das pessoas procura.

31513 Kemal

19

Você pode registrar window.location e ver todas as opções, apenas para o URL:

window.location.origin

para todo o caminho, use:

window.location.href

também há localização. _ _

.host
.hostname
.protocol
.pathname

dacopenhagen
fonte

Não deve usá-lo porque location.origin não funciona no Internet Explorer

Jacek Kolasa

15

Isso retornará o URL absoluto da página atual usando JavaScript / jQuery .

document.URL
$("*").context.baseURI
location.href

Riyaz Hameed
fonte

13

Se houver alguém que queira concatenar a URL e a tag hash, combine duas funções:

var pathname = window.location.pathname + document.location.hash;

Nis
fonte

Para esclarecer: você não precisa usar o jQuery, a função javascript acima retornará o que o OP estava pedindo?

GHC

12

Eu tenho isso para retirar as variáveis GET.

var loc = window.location;
var currentURL = loc.protocol + '//' + loc.host + loc.pathname;

Aram Kocharyan
fonte

12

Você pode simplesmente pegar seu caminho usando o próprio js window.locationou locationfornecer o objeto do URL atual

console.log("Origin - ",location.origin);
console.log("Entire URL - ",location.href);
console.log("Path Beyond URL - ",location.pathname);

Expandir snippet

Mohideen bin Mohammed
fonte

11

 var currenturl = jQuery(location).attr('href');

hari maliya
fonte

11

Para obter o URL da janela pai dentro de um iframe:

$(window.parent.location).attr('href');

Nota: só funciona no mesmo domínio

Costa
fonte

11

Aqui está um exemplo para obter o URL atual usando jQuery e JavaScript:

$(document).ready(function() {

    //jQuery
    $(location).attr('href');

    //Pure JavaScript
    var pathname = window.location.pathname;

    // To show it in an alert window
    alert(window.location);
});


$.getJSON("idcheck.php?callback=?", { url:$(location).attr('href')}, function(json){
    //alert(json.message);
});

Peter Mortensen
fonte

10

A seguir, exemplos de trechos de código úteis que podem ser usados - alguns exemplos usam funções JavaScript padrão e não são específicos para o jQuery:

Consulte 8 trechos úteis do jQuery para URLs e consultas .

Issamovitch
fonte

10

Use window.location.href . Isso fornecerá o URL completo .

Saikumar Anireddy
fonte

9

window.location fornecerá a URL atuale você poderá extrair o que quiser dela ...

ZMR BINU
fonte

9

Veja purl.js . Isso realmente ajudará e também pode ser usado, dependendo do jQuery. Use-o assim:

$.url().param("yourparam");

Chuanshi Liu
fonte

8

Se você deseja obter o caminho do site raiz, use o seguinte:

$(location).attr('href').replace($(location).attr('pathname'),'');

vikas mehta
fonte

1

não seria .replace('#.*', '')? Remova não apenas a marca de hash, mas também tudo o que está depois dela?

Jonas Kölker

8

Os 3 principais itens mais usados são:

1. window.location.hostname 
2. window.location.href
3. window.location.pathname

Nitish Kumar Pal
fonte

8

var path = location.pathnameretorna o caminho da URL atual (o jQuery não é necessário). O uso de window.locationé opcional.

Jonathan Lin
fonte

8

Todos os navegadores suportam o objeto da janela Javascript. Ele define a janela do navegador.

Os objetos e funções globais se tornam parte do objeto de janela automaticamente.

Todas as variáveis globais são propriedades de objetos de janela e todas as funções globais são seus métodos.

O documento HTML inteiro também é uma propriedade da janela.

Portanto, você pode usar o objeto window.location para obter todos os atributos relacionados à URL.

Javascript

console.log(window.location.host);     //returns host
console.log(window.location.hostname);    //returns hostname
console.log(window.location.pathname);         //return path
console.log(window.location.href);       //returns full current url
console.log(window.location.port);         //returns the port
console.log(window.location.protocol)     //returns the protocol

Expandir snippet

JQuery

console.log("host = "+$(location).attr('host'));
console.log("hostname = "+$(location).attr('hostname'));
console.log("pathname = "+$(location).attr('pathname')); 
console.log("href = "+$(location).attr('href'));   
console.log("port = "+$(location).attr('port'));   
console.log("protocol = "+$(location).attr('protocol'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Expandir snippet

Sumesh TG
fonte

1

Estou vendo location.pathnameonde você está usando location.path- esta resposta precisa ser atualizada?

Edward

@Edward Updated

Sumesh TG

7

var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;

Hema Ganapathy
fonte

2

você deve adicionar algumas explicações à sua resposta.

Raptor

5

// get current URL

$(location).attr('href');
var pathname = window.location.pathname;
alert(window.location);

Ayan Chakraborty
fonte

4

No jstl, podemos acessar o caminho da URL atual usando pageContext.request.contextPath: Se você deseja fazer uma chamada ajax,

  url = "${pageContext.request.contextPath}" + "/controller/path"

Ex: na página http://stackoverflow.com/questions/406192isso daráhttp://stackoverflow.com/controller/path

Maleen Abewardana
fonte

Obter URL atual com jQuery?

Respostas: