¿Cómo obtener la base url con jquery o javascript?

152

En joomla php allí puedo usar $this->baseurlpara obtener la ruta base, pero quería obtener la ruta base en jquery.

La ruta base puede ser cualquiera de los siguientes ejemplos:

http://www.example.com/
http://localhost/example
http://www.example.com/sub/example

El exampletambién puede cambiar.

javascript  jquery 
— Navin Rauniyar
fuente
— Mritunjay
@Mritunjay Ya lo vi, pero en mi caso el camino base es diferente ya que deseaba obtener el camino base como en php que hacemos en joomla
— Navin Rauniyar
Entonces, ¿ninguna de las respuestas resolvió su problema?
— Artjom B.
elige una respuesta, por favor?
— allanberry

Respuestas:

177

Este te ayudará ...

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
— Jenish
fuente
¡Si, funciona! http://localhost/myapp/what/ever/sub/folder-> getBaseUrl -> http://localhost/myapp:-)
— vee
3
Esto no funcionará en todos los casos, como lo indica la respuesta de alguna manera subestimada por @Artjom B. Por ejemplo, cuando un sitio se prueba a través de la red local (y el dominio se sustituye por IP + ruta local), la URL base podría ser algo así como 192.168.0.23/~sites/site/html/en lugar de site.dev. Obtener el nombre de ruta completo con Javascript tampoco es una opción, porque un sitio puede tener cualquier cantidad de subdirectorios virtuales.
— Ciertamente, el
124

Creo que te irá bien

var base_url = window.location.origin;

var host = window.location.host;

var pathArray = window.location.pathname.split( '/' );
— Haris
fuente
77
Agradable corto y dulce, gracias. window.location.origin
— TetraDev
1
Esta debería ser la respuesta preferida, ya que es corta, concisa y funciona bien.
— Gregor
window.location.origin no está definido en ie9
— jnoreiga
1
@jnoreiga Quién sigue usando ie9 ツ
— Alexandre Daubricourt
2
Ojalá fuera así de simple @AlexandreDaubricourt
— jnoreiga
30

Esto obtendrá la URL base

var baseurl = window.location.origin+window.location.pathname;
— Zaheer Babar
fuente
esto es lo mismo que window.location.href
— Z. Khullah
8
no es lo mismo, pathname le da el segmento de ruta de la url, href también contiene los parámetros de consulta
— dschulten
24

Esta es una pregunta extremadamente antigua, pero aquí están los enfoques que uso personalmente ...

Obtener URL estándar / base

Como muchos ya han dicho, esto funciona para la mayoría de las situaciones.

var url = window.location.origin;


Obtener URL base absoluta

Sin embargo, este enfoque simple se puede utilizar para quitar cualquier número de puerto. 

var url = "http://" + location.host.split(":")[0];

Editar: para abordar la inquietud, planteada por Jason Rice , lo siguiente se puede utilizar para insertar automáticamente el tipo de protocolo correcto ...

var url = window.location.protocol + "//" + location.host.split(":")[0];


Establecer URL base

Como beneficio adicional, la URL base se puede redefinir globalmente. 

document.head.innerHTML = document.head.innerHTML + "<base href='" + url + "' />";
— Dustin Halstead
fuente
1
A menos que su protocolo sea distinto de http como https (luego, al establecer el protocolo de URL en "http: //", se presentarán algunos errores realmente extraños dependiendo de cómo desee utilizar la URL).
— Jason Rice el
13

Esto no es posible desde javascript, porque esta es una propiedad del lado del servidor. Javascript en el cliente no puede saber dónde está instalado joomla. La mejor opción es incluir de alguna manera el valor de $this->baseurljavascript en la página y luego usar este valor ( phpBaseUrl).

Luego puede construir la url de esta manera:

var loc = window.location;
var baseUrl = loc.protocol + "//" + loc.hostname + (loc.port? ":"+loc.port : "") + "/" + phpBaseUrl;
— Artjom B.
fuente
1
Tenga en cuenta que loc.hosttiene el puerto, para una URL como la http://localhost:8082/que producirá este método http://localhost:8082:8082/, window.location.hostnamedebe usarse en su lugar.
— Tiberiu C.
@TiberiuC. Gracias, agregó.
— Artjom B.
8

Tuve el mismo problema hace un tiempo, mi problema era que simplemente necesitaba la URL base. Aquí hay muchas opciones detalladas, pero para evitar esto, simplemente use el window.locationobjeto. En realidad, escriba esto en la consola del navegador y presione enter para seleccionar sus opciones allí. Bueno para mi caso fue simplemente: 

window.location.origin
— Johhn
fuente
7 
var getUrl = window.location;
var baseurl = getUrl.origin; //or
var baseurl =  getUrl.origin + '/' +getUrl.pathname.split('/')[1];

Pero no puede decir que el baseurl () de CodeIgniter (o php joomla) devolverá el mismo valor, ya que es posible cambiar el baseurl en el archivo .htaccess de estos marcos.

Por ejemplo :

Si tiene un archivo .htaccess como este en su host local:

RewriteEngine on
RewriteBase /CodeIgniter/
RewriteCond $1 !^(index.php|resources|robots.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

$ This-> baseurl () devolverá http: // localhost / CodeIgniter /

— AKHIL KUMAR
fuente
6

Me he encontrado con esta necesidad en varios proyectos de Joomla. La forma más simple que he encontrado para abordar es agregar un campo de entrada oculto a mi plantilla:

<input type="hidden" id="baseurl" name="baseurl" value="<?php echo $this->baseurl; ?>" />

Cuando necesito el valor en JavaScript:

var baseurl = document.getElementById('baseurl').value;

No es tan elegante como usar JavaScript puro, pero es simple y hace el trabajo.

— Brian Bolli
fuente
6

La forma más fácil de obtener la URL base en jQuery

window.location.origin
— Qaisar Malik
fuente
Esto en realidad no es jQuery. jQuery tiene este aspecto: $ (ubicación) .attr ("origen");
— Mauritz Hansen
3

Recomendaría a todos crear una etiqueta base HTML en desarrollo, luego asignar el href dinámicamente, por lo que en la producción, sea cual sea el host que use un cliente, se adaptará automáticamente a él:

<html>
 <title>Some page title</titile>
  <script type="text/javascript">
    var head  = document.getElementsByTagName('head')[0];
    var base = document.createElement("base");
    base.href = window.document.location.origin;
    head.appendChild(base);
  </script>
 </head>
 ...

Entonces, si está en localhot: 8080, alcanzará cada archivo vinculado o referenciado desde la base, por ejemplo: http://localhost:8080/some/path/file.html si está en www.example.com, seráhttp://www.example.com/some/path/file.html

También tenga en cuenta que, en cada ubicación en la que se encuentre, no debe usar referencias como globos en hrefs, por ejemplo: la ubicación principal http://localhost:8080/nohttp://localhost:8080/some/path/ .

Pretenda que haga referencia a todos los hipervínculos como sentencia completa sin la URL básica.

— cagcak
fuente
3

El formato es hostname / pathname / search

Entonces la url es: 

var url = window.location.hostname + window.location.pathname + window.location.hash

Para su caso 

window.location.hostname = "stackoverflow.com"
window.location.pathname ="/questions/25203124/how-to-get-base-url-with-jquery-or-javascript"
window.location.hash = ""

Básicamente, la baseurl = hostname = window.location.hostname

— Md. Khirul Islam Omi
fuente
3

Me sorprende que ninguna de las respuestas considere la URL base si se estableció en la <base>etiqueta. Todas las respuestas actuales intentan obtener el nombre de host o el nombre del servidor o la primera parte de la dirección. Esta es la lógica completa que también considera la <base>etiqueta (que puede referirse a otro dominio o protocolo):

function getBaseURL(){
  var elem=document.getElementsByTagName("base")[0];
  if (typeof(elem) != 'undefined' && elem != null){
     return elem.href;
  }
  return window.location.origin;
}

Formato jquery:

function getBaseURL(){
  if ($("base").length){
     return $("base").attr("href");
  }
  return window.location.origin;
}

Sin involucrarse con la lógica anterior, la solución abreviada que considera tanto la <base>etiqueta como window.location.origin:

Js:

var a=document.createElement("a");
a.href=".";
var baseURL= a.href;

Jquery:

var baseURL= $('<a href=".">')[0].href

Nota final: para un archivo local en su computadora (no en un host), window.location.originsolo devuelve el file://pero la solución de clasificación anterior devuelve la ruta correcta completa.

— Ali Sheikhpour
fuente
1
Esta no es la mejor manera. Además, vea la respuesta de @ DaniilSamoylov, que incorpora el <base>elemento.
— Brad
baseURI devuelve la URL base de un nodo, por lo que en este caso devuelve la ruta base + el nombre del documento. necesitará más códigos para eliminar el nombre del documento de esa URL. @Brad
— Ali Sheikhpour
Esta solución no devuelve la URL base correcta cuando el directorio raíz de la página web está dentro de un subdirectorio (por ejemplo, ejemplo.com/appRoot ). Solo funciona cuando el directorio raíz de la página web se encuentra directamente en la raíz del host web.
— Michael Hafner
2 
window.location.origin+"/"+window.location.pathname.split('/')[1]+"/"+page+"/"+page+"_list.jsp"

casi igual que la respuesta de Jenish pero un poco más corta.

— Mateen
fuente
2

Estaba en el mismo escenario y esta solución me funciona.

En la vista

<?php
    $document = JFactory::getDocument();

    $document->addScriptDeclaration('var base = \''.JURI::base().'\'');
    $document->addScript('components/com_name/js/filter.js');
?>

En el archivo js accedes basecomo una variable, por ejemplo, en tu escenario:

console.log(base) // will print
// http://www.example.com/
// http://localhost/example
// http://www.example.com/sub/example

No recuerdo de dónde saco esta información para dar crédito, si la encuentro editaré la respuesta

— Mario
fuente
1 
var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
— vikas Chaturvedi
fuente
1
Considere agregar una descripción a su respuesta.
— Capricornio
1

Aquí hay algo rápido que también funciona con file:// URL.

Se me ocurrió esta frase:

[((1!=location.href.split(location.href.split("/").pop())[0].length?location.href.split(location.href.split("/").pop())[0]:(location.protocol,location.protocol+"//" + location.host+"/"))).replace(location.protocol+"//"+location.protocol+"//"+location.protocol+"://")]
— Blubbll
fuente
0

Mencionó que example.compuede cambiar, por lo que sospecho que realmente necesita la URL base solo para poder usar la notación de ruta relativa para sus scripts. En este caso en particular, no es necesario usar secuencias de comandos; en su lugar, agregue la etiqueta base a su encabezado:

<head>
  <base href="http://www.example.com/">
</head>

Generalmente genero el enlace a través de PHP.

— Hexodus
fuente
0

En caso de que a alguien le gustaría ver esto dividido en una función muy robusta

    function getBaseURL() {
        var loc = window.location;
        var baseURL = loc.protocol + "//" + loc.hostname;
        if (typeof loc.port !== "undefined" && loc.port !== "") baseURL += ":" + loc.port;
        // strip leading /
        var pathname = loc.pathname;
        if (pathname.length > 0 && pathname.substr(0,1) === "/") pathname = pathname.substr(1, pathname.length - 1);
        var pathParts = pathname.split("/");
        if (pathParts.length > 0) {
            for (var i = 0; i < pathParts.length; i++) {
                if (pathParts[i] !== "") baseURL += "/" + pathParts[i];
            }
        }
        return baseURL;
    }
— nuander
fuente
Esto solo da toda la url. No es una URL base.
— Sam
de hecho, no estoy seguro de a dónde iba con eso. Hace mucho tiempo que
— cambié
0

Fácil 

$('<img src=>')[0].src

Genera un img con el nombre src vacío obliga al navegador a calcular la url base por sí mismo, sin importar si tiene /index.htmlo cualquier otra cosa.

— Severo
fuente
Esta parece la solución más elegante de todas y la única que no duplica la lógica del navegador, lo cual es bueno. Me pregunto qué tan portátil es. ¿Hay algo en las especificaciones HTML que sugiera que está garantizado que funcione en todos los navegadores?
— Matthijs Kooijman
@MatthijsKooijman Depende de la interpretación de las especificaciones html. Si dice que un nombre de archivo de longitud 0 es un nombre de recurso válido ... coincide con todos los navegadores.
— Grim
Comprende cómo se hacen los navegadores. Tienes un par de programadores, los (indirectos) desean construir un navegador. Su primera fuente son las especificaciones html. Leen las especificaciones y esta es una de las preguntas que realmente les gusta resolver. ¿Cómo pensarías que (todos) deciden sobre estas circunstancias?
— Grim
-2

Dividir y unir la URL:

const s = 'http://free-proxy.cz/en/abc'
console.log(s.split('/').slice(0,3).join('/'))
— conceder sol
fuente
-4

Ponga esto en su encabezado, para que esté disponible cuando lo necesite.

var base_url = "<?php echo base_url();?>";

Obtendrás http://localhost:81/your-path-fileo http://localhost/your-path-file.

— Asrofil Al Banna
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.