---
title: Location
slug: Web/API/Location
tags:
- API
- HTML DOM
- Interface
- Location
- Referencia
translation_of: Web/API/Location
---
<p>{{APIRef("HTML DOM")}}</p>
<p>La interface <strong><code>Location</code></strong> representa la ubicación (URL) del objeto al que esta vinculado. Los cambios hechos en ella son reflejados en el objeto al cual está relacionado. Ambas interfaces, {{domxref("Document")}} y {{domxref("Window")}} tienen una interface <code>Location</code> asignada, accessible desde {{domxref("Document.location")}} y {{domxref("Window.location")}} respectivamente.</p>
<h2 id="Propiedades">Propiedades</h2>
<p><em>La interface <code>Location</code></em><em> no hereda ninguna propiedad, pero las implementa desde {{domxref("URLUtils")}}.</em></p>
<dl>
<dt>{{domxref("Location.href")}}</dt>
<dd>Es un {{domxref("DOMString")}} que contiene la URL completa. Si es cambiada, el documento asociado navegará a la nueva pagina. Puede ser cambiada desde un origen diferente que el asociado al documento.</dd>
<dt>{{domxref("Location.protocol")}}</dt>
<dd>Es un {{domxref("DOMString")}} que contiene el esquema del protocolo de la URL, incluyendo el <code>':'</code> final.</dd>
<dt>{{domxref("Location.host")}}</dt>
<dd>Es un {{domxref("DOMString")}} que contiene el host, el cual esta compuesta por: <em>hostname</em>, <code>':'</code>, y el <em>port</em> de la URL.</dd>
<dt>{{domxref("Location.hostname")}}</dt>
<dd>Es un {{domxref("DOMString")}} que contiene el dominio de la URL.</dd>
<dt>{{domxref("Location.port")}}</dt>
<dd>Es un {{domxref("DOMString")}} que contiene el numero del puerto de la URL.</dd>
<dt>{{domxref("Location.pathname")}}</dt>
<dd>Es un {{domxref("DOMString")}} que contiene el <code>'/'</code> inicial, seguido por la ruta de la URL.</dd>
<dt>{{domxref("Location.search")}}</dt>
<dd>Es un {{domxref("DOMString")}} que contiene un <code>'?'</code> seguido por los parametros o el "querystring" de la URL. Navegadores modernos proveen <a href="/en-US/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> y <a href="/en-US/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> para hacer mas facil de obtener los parametros desde el querystring.</dd>
<dt>{{domxref("Location.hash")}}</dt>
<dd>Es un {{domxref("DOMString")}} que contiene un <code>'#'</code> seguido por el fragmento identificador de la URL.</dd>
<dt>{{domxref("Location.username")}}</dt>
<dd>Es un {{domxref("DOMString")}} que contiene el <em>username</em> (usuario) especificado antes del dominio.</dd>
<dt>{{domxref("Location.password")}}</dt>
<dd>Es un {{domxref("DOMString")}} que contiene el <em>password</em> (contraseña) especificado antes del dominio.</dd>
<dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt>
<dd>Es un {{domxref("DOMString")}} que contiene la forma canonica del <em>origin</em> (origen) de la URL.</dd>
</dl>
<h2 id="Metodos">Metodos</h2>
<p><em>La interface <code>Location</code></em><em> no hereda ningun metodo<em>, pero los implementa desde {{domxref("URLUtils")}}</em>.</em></p>
<dl>
<dt>{{domxref("Location.assign()")}}</dt>
<dd>Carga el recurso en la URL proporcionada en el parámetro.</dd>
<dt>{{domxref("Location.reload()")}}</dt>
<dd>Recarga el recurso desde la URL actual. Si unico y opcional parametro es {{domxref("Boolean")}}, el cual, cuando es <code>true</code>, hace que la pagina siempre sea recargada desde el servidor. Si es <code>false</code> o no es especificado, el navegador puede recargar la pagina desde su cache.</dd>
<dt>{{domxref("Location.replace()")}}</dt>
<dd>Reemplaza el recurso actual por el recibido como URL. La diferencia con el metodo <code>assign()</code> es que luego de usar <code>replace()</code> la pagina actual no va a ser guardada en la sesión {{domxref("History")}}, esto significa que el usuario no podrá usar el boton <em>Atras</em> para navegar a esta.</dd>
<dt>{{domxref("Location.toString()")}}</dt>
<dd>Retorna un {{domxref("DOMString")}} que contiene la URL completa. Es un sinonimo de {{domxref("URLUtils.href")}}, aunque este no puede ser utilizado para modificar el valor.</dd>
</dl>
<h2 id="Ejemplo">Ejemplo</h2>
<pre class="brush: js">// Crear un elemento <a> y usar la propiedad href para el proposito de este ejemplo.
// Una alternativa mas correcta es navegar a la URL y usar document.location o window.location
var url = document.createElement('a');
url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
console.log(url.href); // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol); // https:
console.log(url.host); // developer.mozilla.org:8080
console.log(url.hostname); // developer.mozilla.org
console.log(url.port); // 8080
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // https://developer.mozilla.org
</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificacion</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>No change from {{SpecName("HTML5 W3C")}}.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Definicion inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Caracteristica</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Soporte basico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>origin</code> en <code>Windows.location</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop("21")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>origin</code> en todos los objetos <code>location</code> (pero en Workes, usa {{domxref("WorkerLocation")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop("26")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>username</code> and <code>password</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop("26")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Caracteristica</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte basico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>origin</code> en <code>Windows.location</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("21")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>origin</code> en todos los objetos <code>location</code> (pero en Workers, usa {{domxref("WorkerLocation")}})</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("26")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>username</code> y <code>password</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("26")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Vea_también">Vea también</h2>
<ul>
<li>Dos metodos que crean tal objeto: {{domxref("Window.location")}} y {{domxref("Document.location")}}.</li>
<li>URL relacionadas a interfaces: {{domxref("URL")}}, {{domxref("URLSearchParams")}} y {{domxref("HTMLHyperlinkElementUtils")}}</li>
</ul>