Wie bekomme ich eine Basis-URL mit JQuery oder Javascript?

152

In joomla php kann ich dort den Basispfad abrufen $this->baseurl, aber ich wollte den Basispfad in jquery abrufen.

Der Basispfad kann eines der folgenden Beispiele sein:

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

Das examplekann sich auch ändern.

javascript jquery Navin Rauniyar
quelle

Mögliches Duplikat von Wie erhalte ich den Basispfad in jQuery?

Mritunjay

@Mritunjay Ich habe das bereits gesehen, aber in meinem Fall ist der Basispfad anders, da ich den Basispfad erhalten wollte, wie in PHP, das wir in Joomla machen

Navin Rauniyar

Also hat keine der Antworten Ihr Problem gelöst?

Artjom B.

Wählen Sie bitte eine Antwort.

Allanberry

177

Dieser wird dir helfen ...

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

Jenish
quelle

Ja es funktioniert! http://localhost/myapp/what/ever/sub/folder-> getBaseUrl -> http://localhost/myapp:-)

vee

3

Dies funktioniert nicht in allen Fällen, wie die irgendwie unterbewertete Antwort von @Artjom B zeigt. Wenn beispielsweise eine Site über ein lokales Netzwerk getestet wird (und die Domain durch einen lokalen IP + -Pfad ersetzt wird), könnte die Basis-URL ungefähr so aussehen 192.168.0.23/~sites/site/html/statt site.dev. Das Abrufen des vollständigen Pfadnamens mit Javascript ist ebenfalls keine Option, da eine Site eine beliebige Anzahl von virtuellen Unterverzeichnissen haben kann.

sicherlich

124

Ich denke, es wird für dich in Ordnung sein

var base_url = window.location.origin;

var host = window.location.host;

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

Haris
quelle

7

Schön kurz und süß, danke. window.location.origin

TetraDev

1

Dies sollte die bevorzugte Antwort sein, da sie kurz, prägnant und gut funktioniert.

Gregor

window.location.origin ist nicht definiert in ie9

jnoreiga

1

@jnoreiga Wer verwendet noch ie9 ツ

Alexandre Daubricourt

2

Ich wünschte, es wäre so einfach @AlexandreDaubricourt

jnoreiga

30

Dies wird Basis-URL erhalten

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

Zaheer Babar
quelle

Dies ist das gleiche wie window.location.href

Z. Khullah

8

es ist nicht dasselbe, Pfadname gibt Ihnen das Pfadsegment der URL, href enthält auch die Abfrageparameter

dschulten

24

Dies ist eine sehr alte Frage, aber hier sind die Ansätze, die ich persönlich verwende ...

Standard / Basis-URL abrufen

Wie viele bereits festgestellt haben, funktioniert dies in den meisten Situationen.

var url = window.location.origin;

Holen Sie sich die absolute Basis-URL

Dieser einfache Ansatz kann jedoch verwendet werden, um beliebige Portnummern zu entfernen.

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

Bearbeiten: Um das von Jason Rice gestellte Problem zu lösen, kann Folgendes verwendet werden, um automatisch den richtigen Protokolltyp einzufügen ...

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

Basis-URL festlegen

Als Bonus kann die Basis-URL dann global neu definiert werden.

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

Dustin Halstead
quelle

1

Es sei denn, Ihr Protokoll ist etwas anderes als http wie https (wenn Sie das URL-Protokoll auf "http: //" setzen, werden einige wirklich seltsame Fehler angezeigt, je nachdem, wie Sie die URL verwenden möchten).

Jason Rice

13

Dies ist in Javascript nicht möglich, da dies eine serverseitige Eigenschaft ist. Javascript auf dem Client kann nicht wissen, wo Joomla installiert ist. Die beste Option ist, den Wert von irgendwie $this->baseurlin das Seiten-Javascript aufzunehmen und dann diesen Wert ( phpBaseUrl) zu verwenden.

Sie können die URL dann folgendermaßen erstellen:

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

Artjom B.
quelle

1

Beachten Sie, dass loc.hostder Port, für den eine URL wie http://localhost:8082/diese Methode erzeugt wird http://localhost:8082:8082/, window.location.hostnamestattdessen verwendet werden sollte.

Tiberiu C.

@TiberiuC. Danke, fügte hinzu.

Artjom B.

13

document.baseURIGibt die Basis-URL zurück, die auch den Wert im <base/>Tag https://developer.mozilla.org/en-US/docs/Web/API/Node/baseURI berücksichtigt

Daniil Samoylov
quelle

Dies gibt auch den Hashbang zurück, der höchstwahrscheinlich nicht das war, was der OP wollte

Marcel

8

Hatte vor einiger Zeit das gleiche Problem, mein Problem war, ich brauchte einfach die Basis-URL. Hier gibt es viele detaillierte Optionen, aber um dies zu umgehen, verwenden Sie einfach das window.locationObjekt. Geben Sie dies tatsächlich in die Browserkonsole ein und drücken Sie die Eingabetaste, um dort Ihre Optionen auszuwählen. Gut für meinen Fall war es einfach:

window.location.origin

Johhn
quelle

7

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

Sie können jedoch nicht sagen, dass die baseurl () von CodeIgniter (oder php joomla) denselben Wert zurückgibt, da die baseurl in der .htaccess-Datei dieser Frameworks geändert werden kann.

Zum Beispiel :

Wenn Sie eine .htaccess-Datei wie diese in Ihrem localhost haben:

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]

Das $ this-> baseurl () gibt http: // localhost / CodeIgniter / zurück

AKHIL KUMAR
quelle

6

Ich bin bei mehreren Joomla-Projekten auf diesen Bedarf gestoßen. Der einfachste Weg, den ich gefunden habe, besteht darin, meiner Vorlage ein verstecktes Eingabefeld hinzuzufügen:

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

Wenn ich den Wert in JavaScript brauche:

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

Nicht so ausgefallen wie die Verwendung von reinem JavaScript, aber einfach und erledigt die Arbeit.

Brian Bolli
quelle

6

Der einfachste Weg, um eine Basis-URL in jQuery zu erhalten

window.location.origin

Qaisar Malik
quelle

Dies ist eigentlich nicht jQuery. jQuery sieht folgendermaßen aus: $ (location) .attr ("origin");

Mauritz Hansen

3

Ich würde jedem empfehlen, in der Entwicklung ein HTML-Basistag zu erstellen und dann die href dynamisch zuzuweisen, damit sie in der Produktion unabhängig vom Host, den ein Client verwendet, automatisch angepasst wird:

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

Wenn Sie sich also in localhot: 8080 befinden, erreichen Sie jede verknüpfte oder referenzierte Datei von der Basis aus, z. B.: http://localhost:8080/some/path/file.html Wenn Sie sich in www.example.com befinden, ist dies der Fallhttp://www.example.com/some/path/file.html

Beachten Sie auch , dass jeder Standort du bist auf, sollten Sie nicht Referenzen wie Kleckse in hrefs verwenden, zB: Parent Lage verursacht http://localhost:8080/nicht http://localhost:8080/some/path/.

Stellen Sie sich vor, Sie verweisen auf alle Hyperlinks als vollständig verurteilt ohne die Basis-URL.

Cagcak
quelle

3

Das Format ist Hostname / Pfadname / Suche

Die URL lautet also:

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

Für Ihren Fall

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

Also im Grunde die baseurl = hostname = window.location.hostname

Md. Khirul Islam Omi
quelle

3

Ich bin überrascht, dass keine der Antworten die Basis-URL berücksichtigt, wenn sie im <base>Tag festgelegt wurde. Bei allen aktuellen Antworten wird versucht, den Host- oder Servernamen oder den ersten Teil der Adresse abzurufen. Dies ist die vollständige Logik, die auch das <base>Tag berücksichtigt (das sich möglicherweise auf eine andere Domäne oder ein anderes Protokoll bezieht):

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

JQuery-Format:

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

Ohne sich auf die obige Logik einzulassen, die Kurzlösung, die sowohl <base>Tag als auch window.location.origin:

Js:

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

Jquery:

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

Schlussbemerkung: Für eine lokale Datei auf Ihrem Computer (nicht auf einem Host) gibt window.location.originnur file://die Datei zurück, aber die obige Sorthand-Lösung gibt den vollständig korrekten Pfad zurück.

Ali Sheikhpour
quelle

1

Dies ist nicht der beste Weg. Siehe auch die Antwort von @ DaniilSamoylov, in der das <base>Element enthalten ist.

Brad

baseURI gibt die Basis-URL eines Knotens zurück. In diesem Fall wird der Basispfad + der Dokumentname zurückgegeben. Sie benötigen weitere Codes, um den Dokumentnamen von dieser URL zu entfernen. @ Rad

Ali Sheikhpour

Diese Lösung gibt nicht die richtige Basis-URL zurück, wenn sich das Stammverzeichnis der Webseite in einem Unterverzeichnis befindet (z . B. example.com/appRoot ). Dies funktioniert nur, wenn sich das Stammverzeichnis der Webseite direkt im Stammverzeichnis des Webhosts befindet.

Michael Hafner

2

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

fast genauso wie Jenishs Antwort, aber etwas kürzer.

Mateen
quelle

2

Ich war gerade auf der gleichen Bühne und diese Lösung funktioniert für mich

In der Ansicht

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

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

In der js-Datei greifen Sie basebeispielsweise in Ihrem Szenario als Variable zu:

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

Ich erinnere mich nicht, woher ich diese Informationen nehme, um sie zu würdigen. Wenn ich sie finde, werde ich die Antwort bearbeiten

Mario
quelle

1

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

vikas Chaturvedi
quelle

1

Bitte fügen Sie Ihrer Antwort eine Beschreibung hinzu.

Steinbock

1

Hier ist etwas schnelles, das auch mit file://URLs funktioniert .

Ich habe mir diesen Einzeiler ausgedacht:

[((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
quelle

0

Sie haben erwähnt, dass sich dies example.commöglicherweise ändert, sodass ich vermute, dass Sie tatsächlich die Basis-URL benötigen, um die relative Pfadnotation für Ihre Skripte verwenden zu können. In diesem speziellen Fall ist keine Verwendung von Skripten erforderlich. Fügen Sie stattdessen das Basistag zu Ihrem Header hinzu:

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

Normalerweise generiere ich den Link über PHP.

Hexodus
quelle

0

Für den Fall, dass jemand dies in eine sehr robuste Funktion aufteilen möchte

    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
quelle

Dies gibt nur die gesamte URL. Keine Basis-URL.

Sam

in der Tat nicht sicher, wohin ich damit ging. Ich habe längst auf die Einstellung mit serverseitigem Code

umgestellt

0

Einfach

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

Erzeugt ein IMG mit leerem Quellnamen und zwingt den Browser, die Basis-URL selbst zu berechnen, unabhängig davon, ob Sie /index.htmletwas anderes haben oder nicht.

Grimmig
quelle

Dies scheint die eleganteste Lösung von allen zu sein und die einzige, die die Browserlogik nicht dupliziert, was sehr schön ist. Ich frage mich, wie tragbar es ist. Gibt es irgendetwas in den HTML-Spezifikationen, das darauf hindeutet, dass dies garantiert in allen Browsern funktioniert?

Matthijs Kooijman

@MatthijsKooijman Abhängig von der Interpretation der HTML-Spezifikationen. Wenn Sie sagen, dass ein Dateiname der Länge 0 ein gültiger Ressourcenname ist, stimmt er mit allen Browsern überein.

Grimmig

Verstehen Sie, wie Browser erstellt werden. Sie haben ein paar Programmierer, die (indirekt) einen Browser bauen wollen. Ihre erste Quelle sind die HTML-Spezifikationen. Sie lesen die Spezifikationen und dies ist eine der Fragen, die sie wirklich gerne lösen. Wie würden sie (alle) über diese Umstände entscheiden?

Grimmig

-2

Teilen und verbinden Sie die URL:

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

Sonne gewähren
quelle

-4

Fügen Sie dies in Ihre Kopfzeile ein, damit es verfügbar ist, wann immer Sie es benötigen.

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

Sie werden http://localhost:81/your-path-fileoder bekommen http://localhost/your-path-file.

Asrofil Al Banna
quelle

Wie bekomme ich eine Basis-URL mit JQuery oder Javascript?

Antworten:

Standard / Basis-URL abrufen

Holen Sie sich die absolute Basis-URL

Basis-URL festlegen