Obtener URL actual con jQuery?
-
03-07-2019 - |
Pregunta
Estoy usando jQuery. ¿Cómo obtengo la ruta de la URL actual y la asigno a una variable?
URL de ejemplo:
http://localhost/menuname.de?foo=bar&number=0
Solución
Para obtener la ruta, puede 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)
Otros consejos
En estilo jQuery puro:
$(location).attr('href');
El objeto de ubicación también tiene otras propiedades, como host, hash, protocolo y ruta.
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>');
Esto funcionará solo si tiene jQuery. Por ejemplo:
<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>
Si necesita que los parámetros de hash estén presentes en la URL, window.location.href
puede ser una mejor opción.
window.location.pathname
=> /search
window.location.href
=> www.website.com/search#race_type=1
Deberá utilizar la window.location incorporada en JavaScript.
objeto.
Simplemente agregue esta función en JavaScript y devolverá la ruta absoluta de la ruta actual.
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 ti.
window.location es un objeto en javascript. devuelve los siguientes datos
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
en jquery puedes 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
Este es un tema más complicado de lo que muchos pueden pensar. Varios navegadores son compatibles con los objetos de ubicación de JavaScript incorporados y los parámetros / métodos asociados accesibles a través de window.location
o document.location
. Sin embargo, los distintos tipos de Internet Explorer (6,7) no admiten estos métodos de la misma manera, ( window.location.href
? window.location.replace ()
no es compatible), por lo que tendrá que acceder a ellos de manera diferente escribiendo el código condicional todo el tiempo para tener acceso a Internet Explorer.
Por lo tanto, si tiene jQuery disponible y cargado, también puede usar jQuery (ubicación), como se mencionó en los demás, ya que resuelve estos problemas. Sin embargo, si está haciendo, por ejemplo, alguna redirección de geolocalización del lado del cliente a través de JavaScript (es decir, utilizando la API de Google Maps y los métodos de objetos de ubicación), es posible que no desee cargar la biblioteca jQuery completa y escribir su código condicional que comprueba todas las versiones de Internet Explorer / Firefox / etc.
Internet Explorer hace infeliz al gato de codificación de front-end, pero jQuery es un plato de leche.
Solo para el nombre de host, use:
window.location.hostname
Esto también funcionará:
var currentURL = window.location.href;
java-script proporciona muchos métodos para recuperar la URL actual que se muestra en la barra de direcciones del navegador.
URL de prueba:
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);
Función :
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 & # 171; Navegadores web utilizan el Protocolo de Internet siguiendo algunas reglas para la comunicación entre las aplicaciones WebHosted y el cliente web (navegador ) (http = 80 , https (SSL) = 443 , ftp = 21, etc.)
EX: con números de puerto predeterminados
<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
- (//) & # 171; Host es el nombre dado a un punto final (máquina en la que vive el recurso) en Internet. www.stackoverflow.com - DNS Dirección IP de una aplicación (OR) localhost: 8080 - localhost
Los nombres de dominio se registran según las reglas y procedimientos del árbol del Sistema de nombres de dominio (DNS). Servidores DNS de alguien que administra su dominio con dirección IP para fines de direccionamiento. En la jerarquía del servidor DNS El nombre de la raíz de un stackoverlfow.com es com.
gTLDs - com « stackoverflow (OR) in « co « google
El sistema local tiene que mantener los dominios que no son PÚBLICOS en los Archivos de Host.
localhost.yash.com & # 171; localhsot - subdominio (
servidor web
Proxy-Server
).
myLocalApplication.com 172.89.23.777
- (/) & # 171; La ruta proporciona información sobre el recurso específico dentro del host al que el cliente web desea acceder
- (?) & # 171; Una consulta opcional es pasar una secuencia de atributos & # 8211; pares de valores separados por un delimitador (& amp;).
- (#) & # 171; Un fragmento opcional es a menudo un atributo de identificación de un elemento específico, y los navegadores web mostrarán este elemento a la vista.
Si el parámetro tiene una Epoch ? date = 1467708674
luego use.
var epochDate = 1467708674; var date = new Date( epochDate );
URL de autenticación con nombre de usuario: contraseña, si usuario / contraseña contiene el símbolo @
como:
Username = `my_email@gmail`
Password = `Yash@777`
entonces necesita codificar en URL el @
como %40
. Consulte ...
http://my_email%40gmail.com:Yash%40777@www.my_site.com
encodeURI ()
(vs) encodeURIComponent ()
ejemplo
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 (-_.!~*')
*/
Puede registrar window.location y ver todas las opciones, solo para el uso de URL:
window.location.origin
para todo el uso de la ruta:
window.location.href
también hay ubicación. _ _
.host
.hostname
.protocol
.pathname
Si hay alguien que quiere concatenar la URL y la etiqueta hash, combine dos funciones:
var pathname = window.location.pathname + document.location.hash;
Tengo esto para eliminar las variables GET.
var loc = window.location;
var currentURL = loc.protocol + '//' + loc.host + loc.pathname;
Simplemente puede obtener su ruta utilizando js, ?? window.location
o location
le dará el objeto de la URL actual
console.log("Origin - ",location.origin);
console.log("Entire URL - ",location.href);
console.log("Path Beyond URL - ",location.pathname);
var currenturl = jQuery(location).attr('href');
Para obtener la URL de la ventana principal desde un iframe:
$(window.parent.location).attr('href');
NB: solo funciona en el mismo dominio
Aquí hay un ejemplo para obtener la URL actual usando jQuery y 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);
});
Los siguientes son ejemplos de fragmentos de código útiles que se pueden utilizar: algunos de los ejemplos utilizan funciones estándar de JavaScript y no son específicos de jQuery:
Ver 8 Fragmentos de jQuery útiles para URL y & amp; Cadenas de consulta .
Utilice window.location.href . Esto le dará la URL completa.
window.location le dará la actual URL , y puedes extraer lo que quieras de él ...
Si desea obtener la ruta del sitio raíz, use esto:
$(location).attr('href').replace($(location).attr('pathname'),'');
Ver purl.js . Esto realmente ayudará y también se puede usar, dependiendo de jQuery. Úsalo así:
$.url().param("yourparam");
var path = location.pathname
devuelve la ruta de la URL actual (no se necesita jQuery). El uso de window.location
es opcional.
Los 3 principales más utilizados son
1. window.location.hostname
2. window.location.href
3. window.location.pathname
Todos los navegadores admiten el objeto de ventana de Javascript. Define la ventana del navegador.
Los objetos y funciones globales se convierten en parte del objeto de la ventana automáticamente.
Todas las variables globales son propiedades de objetos de ventana y todas las funciones globales son sus métodos.
Todo el documento HTML también es una propiedad de ventana.
Por lo tanto, puede usar el objeto window.location para obtener todos los atributos relacionados con la 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
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>
var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
// get current URL
$(location).attr('href');
var pathname = window.location.pathname;
alert(window.location);
En jstl podemos acceder a la ruta url actual usando pageContext.request.contextPath
, si desea hacer una llamada ajax,
url = "${pageContext.request.contextPath}" + "/controller/path"
Ej: en la página http://stackoverflow.com/questions/406192
esto dará http://stackoverflow.com/controller/path