Jak uzyskać podstawowy adres URL za pomocą jQuery lub javascript?

152

W joomla php tam mogę użyć, $this->baseurlaby uzyskać ścieżkę podstawową, ale chciałem uzyskać ścieżkę podstawową w jquery.

Podstawową ścieżką może być dowolny z poniższych przykładów:

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

exampleMoże również zmienić.

javascript jquery Navin Rauniyar
źródło

możliwy duplikat Jak uzyskać ścieżkę bazową w jQuery?

Mritunjay

@Mritunjay Już to widziałem, ale w moim przypadku ścieżka bazowa jest inna, ponieważ chciałem uzyskać ścieżkę podstawową, tak jak w php, który robimy w joomla

Navin Rauniyar

Więc żadna z odpowiedzi nie rozwiązała Twojego problemu?

Artjom B.

wybierz odpowiedź, proszę?

allanberry

177

Ten pomoże ci ...

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

Jenish
źródło

Tak to działa! http://localhost/myapp/what/ever/sub/folder-> getBaseUrl -> http://localhost/myapp:-)

vee

3

To nie zadziała we wszystkich przypadkach, na co wskazuje jakoś niedoceniana odpowiedź @Artjom B.Na przykład, gdy witryna jest testowana w sieci lokalnej (a domena jest zastępowana adresem IP + lokalna ścieżka), podstawowy adres URL może wyglądać tak 192.168.0.23/~sites/site/html/zamiast site.dev. Uzyskanie pełnej ścieżki za pomocą JavaScript również nie jest opcją, ponieważ witryna może mieć dowolną liczbę wirtualnych podkatalogów.

pewnościąakey

124

Myślę, że to będzie dla ciebie w porządku

var base_url = window.location.origin;

var host = window.location.host;

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

Haris
źródło

7

Niezłe, krótkie i słodkie, dzięki. window.location.origin

TetraDev

1

to powinna być preferowana odpowiedź, ponieważ jest krótka, zwięzła i działa dobrze.

Gregor

window.location.origin nie jest zdefiniowane w

ie9

1

@jnoreiga Kto jest wciąż przy IE9ツ

Alexandre Daubricourt

2

Chciałbym, żeby to było takie proste @AlexandreDaubricourt

jnoreiga

30

Spowoduje to uzyskanie podstawowego adresu URL

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

Zaheer Babar
źródło

to jest to samo, co window.location.href

Z. Khullah

8

to nie to samo, pathname podaje segment ścieżki

adresu

24

To bardzo stare pytanie, ale oto podejścia, których osobiście używam ...

Pobierz standardowy / podstawowy adres URL

Jak wielu już powiedziało, działa to w większości sytuacji.

var url = window.location.origin;

Uzyskaj bezwzględny podstawowy adres URL

Jednak to proste podejście można wykorzystać do usunięcia wszelkich numerów portów.

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

Edycja: Aby rozwiązać problem, zgłoszony przez Jasona Rice , można użyć następujących elementów, aby automatycznie wstawić właściwy typ protokołu ...

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

Ustaw podstawowy adres URL

Jako bonus - podstawowy adres URL można następnie globalnie przedefiniować.

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

Dustin Halstead
źródło

1

Chyba że twój protokół jest czymś innym niż http, na przykład https (wtedy ustawienie protokołu adresu URL na „http: //” spowoduje kilka naprawdę dziwnych błędów w zależności od tego, jak chcesz używać adresu URL).

Jason Rice

13

Nie jest to możliwe z poziomu javascript, ponieważ jest to właściwość po stronie serwera. Javascript na kliencie nie może wiedzieć, gdzie jest zainstalowana Joomla. Najlepszą opcją jest dołączenie w jakiś sposób wartości $this->baseurljavascript do strony, a następnie użycie tej wartości ( phpBaseUrl).

Następnie możesz zbudować adres URL w następujący sposób:

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

Artjom B.
źródło

1

Należy pamiętać, że loc.hostma port, za url jak http://localhost:8082/tej metody spowoduje http://localhost:8082:8082/, window.location.hostnamepowinien być stosowany zamiast.

Tiberiu C.

@TiberiuC. Dzięki, dodał.

Artjom B.

13

document.baseURIzwraca podstawowy adres URL również z uwzględnieniem wartości w <base/>tagu https://developer.mozilla.org/en-US/docs/Web/API/Node/baseURI

Daniil Samoylov
źródło

To również zwraca hashbang, który najprawdopodobniej nie jest tym, czego chciał OP

Marcel

8

Miałem ten sam problem jakiś czas temu, mój problem polegał na tym, że po prostu potrzebowałem podstawowego adresu URL. Istnieje wiele szczegółowych opcji, ale aby to obejść, po prostu użyj window.locationobiektu. Właściwie wpisz to w konsoli przeglądarki i naciśnij Enter, aby wybrać tam opcje. W moim przypadku było to po prostu:

window.location.origin

Johhn
źródło

7

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

Ale nie można powiedzieć, że baseurl () programu CodeIgniter (lub php joomla) zwróci tę samą wartość, ponieważ można zmienić baseurl w pliku .htaccess tych frameworków.

Na przykład :

Jeśli masz taki plik .htaccess na swoim hoście lokalnym:

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 () zwróci http: // localhost / CodeIgniter /

AKHIL KUMAR
źródło

6

Napotkałem tę potrzebę w kilku projektach Joomla. Najprostszym sposobem rozwiązania problemu, jaki znalazłem, jest dodanie ukrytego pola wprowadzania do mojego szablonu:

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

Kiedy potrzebuję wartości w JavaScript:

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

Nie tak wyszukane, jak używanie czystego JavaScript, ale proste i gotowe.

Brian Bolli
źródło

6

najprostszy sposób na uzyskanie podstawowego adresu URL w jQuery

window.location.origin

Qaisar Malik
źródło

To właściwie nie jest jQuery. jQuery wygląda następująco: $ (lokalizacja) .attr ("pochodzenie");

Mauritz Hansen

3

Zalecałbym każdemu utworzenie podstawowego tagu HTML w fazie rozwoju, a następnie dynamiczne przypisanie atrybutu href, aby w środowisku produkcyjnym, niezależnie od hosta, z którego korzysta klient, automatycznie się do niego dostosował:

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

Więc jeśli jesteś w localhot: 8080, dotrzesz do każdego powiązanego lub wymienionego pliku z bazy, np .: http://localhost:8080/some/path/file.html Jeśli jesteś w www.example.com, będzie tohttp://www.example.com/some/path/file.html

Zauważ również, że w każdej lokalizacji, w której się znajdujesz, nie powinieneś używać odniesień, takich jak globs, w hrefach, np .: Lokalizacja nadrzędna http://localhost:8080/nie powoduje http://localhost:8080/some/path/.

Udawaj, że odnosisz się do wszystkich hiperłączy jako pełnych wyroków bez podstawowego adresu URL.

cagcak
źródło

3

Format to nazwa hosta / nazwa ścieżki / wyszukiwanie

Tak więc adres URL to:

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

W twoim przypadku

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

Zasadniczo więc baseurl = hostname = window.location.hostname

Md. Khirul Islam Omi
źródło

3

Dziwię się, że żadna z odpowiedzi nie bierze pod uwagę podstawowego adresu URL, jeśli był ustawiony w <base>tagu. Wszystkie aktualne odpowiedzi próbują uzyskać nazwę hosta, nazwę serwera lub pierwszą część adresu. Oto pełna logika, która uwzględnia również <base>tag (który może odnosić się do innej domeny lub protokołu):

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

Format jquery:

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

Bez angażowania się w powyższą logikę, skrótowe rozwiązanie, które uwzględnia zarówno <base>tag, jak i window.location.origin:

Js:

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

JQuery:

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

Uwaga końcowa: w przypadku pliku lokalnego na komputerze (nie na hoście) window.location.originjedyne, co zwraca, file://ale powyższe rozwiązanie, zwraca pełną poprawną ścieżkę.

Ali Sheikhpour
źródło

1

To nie jest najlepszy sposób. Zobacz także odpowiedź @ DaniilSamoylov, która zawiera <base>element.

Brad,

baseURI zwraca podstawowy adres URL węzła, więc w tym przypadku zwraca ścieżkę podstawową + nazwę dokumentu. będziesz potrzebować więcej kodów, aby usunąć nazwę dokumentu z tego adresu URL. @Brad

Ali Sheikhpour,

To rozwiązanie nie zwraca prawidłowego podstawowego adresu URL, gdy katalog główny strony internetowej znajduje się w podkatalogu (np. Example.com/appRoot ). Działa tylko wtedy, gdy katalog główny strony internetowej znajduje się bezpośrednio w katalogu głównym hosta.

Michael Hafner

2

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

prawie taka sama jak odpowiedź Jenish, ale trochę krótsza.

Mateen
źródło

2

Byłem na tym samym etapie i to rozwiązanie działa u mnie

W widoku

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

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

W pliku js uzyskujesz dostęp basejako zmienna, na przykład w Twoim scenariuszu:

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

Nie pamiętam, skąd biorę te informacje do uznania, jeśli je znajdę, poprawię odpowiedź

Mario
źródło

1

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

vikas Chaturvedi
źródło

1

Zastanów się nad dodaniem opisu do swojej odpowiedzi.

Koziorożec

1

Oto coś szybkiego, co działa również z file://adresami URL.

Wymyśliłem ten jednolinijkowy:

[((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
źródło

0

Wspomniałeś, że example.commoże się to zmienić, więc podejrzewam, że w rzeczywistości potrzebujesz podstawowego adresu URL tylko po to, aby móc używać notacji ścieżki względnej dla swoich skryptów. W tym konkretnym przypadku nie ma potrzeby używania skryptów - zamiast tego dodaj tag podstawowy do nagłówka:

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

Zwykle generuję link przez PHP.

Hexodus
źródło

0

Na wypadek, gdyby ktoś chciał, aby to rozbite było na bardzo solidną funkcję

    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
źródło

To po prostu podaje cały adres URL. To nie jest podstawowy adres URL.

Sam

rzeczywiście, nie jestem pewien, dokąd z tym zmierzam. Już dawno przełączyłem się na ustawienie tego za pomocą kodu po stronie serwera

nuander

0

Łatwo

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

Generuje img z pustą nazwą-src zmusza przeglądarkę do samodzielnego obliczenia podstawowego-url, bez względu na to, czy masz, /index.htmlczy cokolwiek innego.

Ponury
źródło

Wydaje się, że jest to najbardziej eleganckie rozwiązanie ze wszystkich i jedyne, które nie powiela logiki przeglądarki, co jest miłe. Zastanawiam się, jak jest przenośny. Czy w specyfikacjach HTML jest coś, co sugerowałoby, że będzie to działać we wszystkich przeglądarkach?

Matthijs Kooijman

@MatthijsKooijman Zależy od interpretacji specyfikacji html. Jeśli powiesz, że nazwa pliku o długości 0 jest prawidłową nazwą zasobu ... pasuje ona do wszystkich przeglądarek.

Ponury

Dowiedz się, jak powstają przeglądarki. Masz kilku programistów, którzy (pośrednio) chcą zbudować przeglądarkę. Ich pierwszym źródłem są specyfikacje html. Czytają specyfikacje i jest to jedno z pytań, które naprawdę lubią rozwiązywać. Jak myślisz, jak oni (wszyscy) decydują o tych okolicznościach?

Ponury

-2

Podziel i dołącz adres URL:

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

udziel słońca
źródło

-4

Umieść to w swoim nagłówku, aby było dostępne w dowolnym momencie.

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

Otrzymasz http://localhost:81/your-path-filelub http://localhost/your-path-file.

Asrofil Al Banna
źródło

Jak uzyskać podstawowy adres URL za pomocą jQuery lub javascript?

Odpowiedzi:

Pobierz standardowy / podstawowy adres URL

Uzyskaj bezwzględny podstawowy adres URL

Ustaw podstawowy adres URL