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

Respostas:

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. #
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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.