Como obter o URL base com jquery ou javascript?

152

No joomla php lá eu posso usar $this->baseurlpara obter o caminho base, mas eu queria obter o caminho base no jquery.

O caminho base pode ser qualquer um dos seguintes exemplos:

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

O exampletambém pode mudar.

javascript jquery Navin Rauniyar
fonte

possível duplicata de Como obter o caminho base no jQuery?

Mritunjay 08/08/19

@Mritunjay eu já vi isso, mas no meu caso o caminho base é diferente como eu queria para obter o caminho de base como em php que fazemos em Joomla

Navin Rauniyar

Então, nenhuma das respostas resolveu seu problema?

precisa

escolha uma resposta, por favor?

allanberry

177

Este irá ajudá-lo ...

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];

Jenish
fonte

Sim, funciona! http://localhost/myapp/what/ever/sub/folder-> getBaseUrl -> http://localhost/myapp:-)

vee

3

Isso não funcionará em todos os casos, como indicado pela resposta de alguma forma não atendida por @Artjom B. Por exemplo, quando um site é testado na rede local (e o domínio é substituído pelo caminho local IP +), o URL base pode ser algo como 192.168.0.23/~sites/site/html/em vez de site.dev. Obter o nome completo do caminho com Javascript também não é uma opção, porque um site pode ter qualquer número de subdiretórios virtuais.

certainlyakey

124

Acho que vai dar certo pra você

var base_url = window.location.origin;

var host = window.location.host;

var pathArray = window.location.pathname.split( '/' );

Haris
fonte

7

Bom curto e doce, obrigado. window.location.origin

TetraDev 27/0618

1

essa deve ser a resposta preferida, pois é curta, concisa e funciona bem.

Gregor

window.location.origin não está definido em ie9

jnoreiga 28/03/19

1

@jnoreiga que ainda está usando o IE9ツ

Alexandre Daubricourt

2

Eu gostaria que fosse assim @AlexandreDaubricourt simples

jnoreiga

30

Isso obterá o URL base

var baseurl = window.location.origin+window.location.pathname;

Zaheer Babar
fonte

é o mesmo que window.location.href

Z. Khullah

8

não é o mesmo, caminho dá-lhe o segmento de caminho da URL, href contém os parâmetros de consulta bem

dschulten

24

Essa é uma pergunta extremamente antiga, mas aqui estão as abordagens que eu pessoalmente uso ...

Obter URL padrão / base

Como muitos já afirmaram, isso funciona para a maioria das situações.

var url = window.location.origin;

Obter URL base absoluto

No entanto, essa abordagem simples pode ser usada para remover qualquer número de porta.

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

Edit: Para abordar a preocupação, apresentada por Jason Rice , o seguinte pode ser usado para inserir automaticamente o tipo de protocolo correto ...

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

Definir URL base

Como um bônus - o URL base pode ser redefinido globalmente.

document.head.innerHTML = document.head.innerHTML + "<base href='" + url + "' />";

Dustin Halstead
fonte

1

A menos que seu protocolo seja algo diferente de http como https (em seguida, definir o protocolo de URL como "http: //" apresentará alguns erros realmente estranhos, dependendo de como você deseja usá-lo).

Jason Arroz

13

Isso não é possível no javascript, porque esta é uma propriedade do servidor. Javascript no cliente não pode saber onde o joomla está instalado. A melhor opção é incluir de alguma forma o valor de $this->baseurlna página javascript e, em seguida, usar esse valor ( phpBaseUrl).

Você pode criar o URL assim:

var loc = window.location;
var baseUrl = loc.protocol + "//" + loc.hostname + (loc.port? ":"+loc.port : "") + "/" + phpBaseUrl;

Artjom B.
fonte

1

Observe que loc.hosta porta, para que uma URL como http://localhost:8082/esse método produza http://localhost:8082:8082/, window.location.hostnamedeve ser usada.

Tiberiu C.

@TiberiuC. Obrigado, acrescentou.

Artjom B. #

13

document.baseURIretorna o URL base também respeitando o valor na <base/>tag https://developer.mozilla.org/en-US/docs/Web/API/Node/baseURI

Daniil Samoylov
fonte

Isso também retorna o hashbang, que provavelmente não é o que o OP queria

Marcel

8

Teve o mesmo problema há um tempo atrás, meu problema era: eu simplesmente precisava do URL base. Existem muitas opções detalhadas aqui, mas para contornar isso, basta usar o window.locationobjeto. Na verdade, digite isso no console do navegador e pressione Enter para selecionar suas opções. Bem, para o meu caso, era simplesmente:

window.location.origin

Johhn
fonte

7

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

Mas você não pode dizer que a baseurl () do CodeIgniter (ou php joomla) retornará o mesmo valor, pois é possível alterar a baseurl no arquivo .htaccess dessas estruturas.

Por exemplo :

Se você tiver um arquivo .htaccess como este em seu 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]

O $ this-> baseurl () retornará http: // localhost / CodeIgniter /

AKHIL KUMAR
fonte

6

Eu me deparei com essa necessidade em vários projetos do Joomla. A maneira mais simples de encontrar o endereço é adicionar um campo de entrada oculto ao meu modelo:

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

Quando preciso do valor em JavaScript:

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

Não é tão chique quanto usar JavaScript puro, mas simples e faz o trabalho.

Brian Bolli
fonte

6

a maneira mais fácil de obter o URL base no jQuery

window.location.origin

Qaisar Malik
fonte

Na verdade, isso não é jQuery. O jQuery fica assim: $ (location) .attr ("origin");

Mauritz Hansen

3

Eu recomendaria a todos que criassem a tag base HTML no desenvolvimento e atribuíssem o href dinamicamente, para que, na produção, seja qual for o host que um cliente use, ele será automaticamente adicionado a ele:

<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>
 ...

Portanto, se você estiver em localhot: 8080, alcançará todos os arquivos vinculados ou referenciados a partir da base, por exemplo: http://localhost:8080/some/path/file.html se estiver em www.example.com, seráhttp://www.example.com/some/path/file.html

Observe também que, em todos os locais em que você está, você não deve usar referências como globs em hrefs, por exemplo: O local pai http://localhost:8080/não http://localhost:8080/some/path/.

Pretenda que você faça referência a todos os hiperlinks como sentenciados completos, sem o URL básico.

cagcak
fonte

3

O formato é nome do host / nome do caminho / pesquisa

Portanto, o URL é:

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

Para o seu caso

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

Então, basicamente, o baseurl = hostname = window.location.hostname

Md. Khirul Islam Omi
fonte

3

Surpreende-me que nenhuma das respostas considere o URL base se ele tiver sido definido na <base>tag. Todas as respostas atuais tentam obter o nome do host ou o nome do servidor ou a primeira parte do endereço. Essa é a lógica completa que também considera a <base>tag (que pode se referir a outro domínio ou 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;
}

Sem se envolver com a lógica acima, a solução abreviada que considera a <base>tag e 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 um arquivo local no seu computador (não em um host), o window.location.originúnico retorna a file://solução, mas a classificação acima, retorna o caminho correto completo.

Ali Sheikhpour
fonte

1

Esta não é a melhor maneira. Veja também a resposta de @ DaniilSamoylov, que incorpora o <base>elemento.

9309 Brad

baseURI retorna a URL base de um nó e, nesse caso, retorna o caminho base + nome do documento. você precisará de mais códigos para remover o nome do documento desse URL. @Brad

Ali Sheikhpour

Esta solução não devolve o URL base correto quando o diretório raiz da página da web está dentro de um subdiretório (por exemplo, example.com/appRoot ). Funciona apenas quando o diretório raiz da página está diretamente localizado na raiz do host.

Michael Hafner

2

window.location.origin+"/"+window.location.pathname.split('/')[1]+"/"+page+"/"+page+"_list.jsp"

quase igual à resposta de Jenish, mas um pouco mais curta.

Mateen
fonte

2

Eu estava no mesmo palco e esta solução funciona para mim

Na vista

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

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

No arquivo js, você acessa basecomo uma variável, por exemplo, no seu cenário:

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

Não me lembro de onde tomo essas informações para dar crédito; se eu as encontrar, editarei a resposta

Mario
fonte

1

var getUrl = window.location;
var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];

vikas Chaturvedi
fonte

1

Por favor, considere adicionar uma descrição à sua resposta.

Capricórnio

1

Aqui está algo rápido que também funciona com file://URLs.

Eu vim com essa 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
fonte

0

Você mencionou que isso example.compode mudar, então eu suspeito que, na verdade, você precisa do URL base apenas para poder usar a notação de caminho relativo para seus scripts. Nesse caso em particular, não há necessidade de usar scripts - em vez disso, adicione a tag base ao seu cabeçalho:

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

Normalmente, eu gero o link via PHP.

Hexodus
fonte

0

Caso alguém queira ver isso dividido em uma função muito 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
fonte

Isso apenas fornece o URL inteiro. Não é um URL base.

Sam

na verdade, não tenho certeza para onde eu estava indo com isso. Eu tenho muito tempo desde que mudou para configuração que com código do lado do servidor

nuander

0

Fácil

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

Gera um img com src-name vazio força o navegador a calcular o URL-base sozinho, não importa se você possui /index.htmlou qualquer outra coisa.

Sombrio
fonte

Essa parece a solução mais elegante de todas e a única que não duplica a lógica do navegador, o que é bom. Eu me pergunto como é portátil. Existe algo nas especificações HTML que sugira que isso funcione em todos os navegadores?

Matthijs Kooijman

@MatthijsKooijman Depende da interpretação das especificações html. Se você diz que um nome de arquivo com o comprimento 0 é um nome de recurso válido ... ele corresponde a todos os navegadores.

Grim

Entenda como os navegadores são criados. Você tem alguns programadores, os (indiretos) desejam criar um navegador. Sua primeira fonte são as especificações html. Eles leem as especificações e essa é uma das perguntas que eles realmente gostam de resolver. Como você acha que eles (todos) decidem sobre essas circunstâncias?

Grim

-2

Divida e junte-se ao URL:

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

conceder sol
fonte

-4

Coloque isso no seu cabeçalho, para que fique disponível sempre que você precisar.

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

Você receberá http://localhost:81/your-path-fileou http://localhost/your-path-file.

Asrofil Al Banna
fonte

Como obter o URL base com jquery ou javascript?

Respostas:

Obter URL padrão / base

Obter URL base absoluto

Definir URL base