How to get base url with jquery or javascript?

Question

In joomla php there I can use $this->baseurl to get the base path, but I wanted to get the base path in jquery.

The base path may be any of the following example:

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

The example may also change.

possible duplicate of [How to get the base path in jQuery?](http://stackoverflow.com/questions/17992578/how-to-get-the-base-path-in-jquery) — Mritunjay, Aug 08 '14 at 12:06
@Mritunjay I already saw that, but in my case the base path is different as I wished to get the base path like in php we do in joomla — Navin Rauniyar, Aug 08 '14 at 12:07

score 279 · Answer 1 · edited Oct 05 '21 at 13:33

279

I think this will work well for you:

var base_url = window.location.origin;

var host = window.location.host;

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

edited Oct 05 '21 at 13:33

Srdjan Pazin

103
2
5

answered Aug 08 '14 at 12:22

Haris N I

6,474
6
29
35

25

Nice short and sweet, thanks. `window.location.origin` – TetraDev Jun 27 '18 at 21:43
2

this should be the preferred answer, as it is short, concise, and works fine. – Gregor Jan 31 '19 at 17:06
window.location.origin is not defined in ie9 – jnoreiga Mar 28 '19 at 15:21
5

@jnoreiga Who's still using ie9 ツ – Alexandre Daubricourt Apr 12 '19 at 11:14
3

I wish it were that simple @AlexandreDaubricourt – jnoreiga Apr 15 '19 at 15:32
These do not work between localhost and a published solution. – Spencer Sullivan Jul 27 '20 at 21:02
what does this show in an iframe? – Jack Riley Dec 22 '22 at 18:31

score 235 · Answer 2 · answered Aug 08 '14 at 12:11

235

This one will help you...

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

answered Aug 08 '14 at 12:11

Jenish

2,383
1
10
4

1

Yes, it works! `http://localhost/myapp/what/ever/sub/folder` -> getBaseUrl -> `http://localhost/myapp` :-) – vee Jul 29 '16 at 09:23
6

This won't work in all the cases, as indicated by somehow undervoted answer by @Artjom B. For example, when a site is tested over local network (and domain is substituted with IP + local path) the base url could be something like `192.168.0.23/~sites/site/html/` instead of `site.dev`. Getting the full pathname with Javascript is not an option too, because a site can have any number of virtual subdirectories. – certainlyakey Aug 01 '16 at 09:49
1

best answer...works fine for me in ionic and react.js – Betini O. Heleno Sep 07 '20 at 17:05

score 42 · Answer 3 · edited May 25 '16 at 13:39

42

This will get base url

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

edited May 25 '16 at 13:39

Artjom B.

61,146
24
125
222

answered Jan 14 '15 at 13:26

Zaheer Babar

1,636
1
15
17

this is the same as window.location.href – Bernardo Dal Corno Oct 27 '16 at 19:28
10

it is not the same, pathname gives you the path segment of the url, href contains the query params as well – dschulten Jul 08 '17 at 12:27

score 37 · Answer 4 · answered Oct 24 '19 at 22:31

37

document.baseURI returns base URL also respecting the value in <base/> tag https://developer.mozilla.org/en-US/docs/Web/API/Node/baseURI

answered Oct 24 '19 at 22:31

Daniil Samoylov

489
4
5

This also returns the hashbang, which most probably not what the OP wanted – Marcel Jan 22 '20 at 16:24
1

@Marcel That is NOT an issue so long as you set the tag in the head of the document. This is the BEST answer on this page! – Jieiku Aug 07 '22 at 19:24

Dustin Halstead · Answer 5 · 2020-05-27T08:06:16.603

This is an extremely old question, but here are the approaches I personally use ...

Get Standard/Base URL

As many have already stated, this works for most situations.

var url = window.location.origin;

Get Absolute Base URL

However, this simple approach can be used to strip off any port numbers.

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

Edit: To address the concern, posed by Jason Rice, the following can be used to automatically insert the correct protocol type ...

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

Set Base URL

As a bonus -- the base URL can then be redefined globally.

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

Unless your protocol is something other than http like https (then setting the url protocol to "http://" will present some really weird errors depending on how you want to use the url). — Jason Rice, Nov 04 '19 at 23:39

score 23 · Answer 6 · edited Jan 07 '21 at 12:11

23

the easiest way to get base url in JavaScript

window.location.origin

edited Jan 07 '21 at 12:11

mesqueeb

5,277
5
44
77

answered Mar 14 '19 at 10:13

Qaisar Malik

439
3
6

1

This is actually not jQuery. jQuery looks like this: $(location).attr("origin"); – Mauritz Hansen Apr 23 '20 at 05:43

Artjom B. · Answer 7 · 2016-05-25T13:39:00.457

14

This is not possible from javascript, because this is a server-side property. Javascript on the client cannot know where joomla is installed. The best option is to somehow include the value of $this->baseurl into the page javascript and then use this value (phpBaseUrl).

You can then build the url like this:

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

edited May 25 '16 at 13:39

answered Aug 08 '14 at 13:12

Artjom B.

61,146
24
125
222

1

Note that `loc.host` has the port, for an url like `http://localhost:8082/` this method will produce `http://localhost:8082:8082/`, `window.location.hostname` should be used instead. – Tiberiu C. May 25 '16 at 08:06
@TiberiuC. Thanks, added. – Artjom B. May 25 '16 at 13:39

AKHIL KUMAR · Answer 8 · 2018-09-15T11:24:19.337

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

But you can't say that the baseurl() of CodeIgniter(or php joomla) will return the same value, as it is possible to change the baseurl in the .htaccess file of these frameworks.

For example :

If you have an .htaccess file like this in your localhost :

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]

The $this->baseurl() will return http://localhost/CodeIgniter/

score 8 · Answer 9 · answered Feb 03 '19 at 18:15

Had the same issue a while ago, my problem was, I simply needed the base url. There are a lot of detailed options here but to get around this, simply use the window.location object. Actually type this in the browser console and hit enter to select your options there. Well for my case it was simply:

window.location.origin

score 5 · Answer 10 · answered Aug 08 '14 at 14:18

I've run into this need on several Joomla project. The simplest way I've found to address is to add a hidden input field to my template:

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

When I need the value in JavaScript:

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

Not as fancy as using pure JavaScript but simple and gets the job done.

score 5 · Answer 11 · edited Aug 21 '20 at 05:47

5

You can easily get it with:

var currentUrl = window.location.href;

or, if you want the original URL, use:

var originalUrl = window.location.origin;

edited Aug 21 '20 at 05:47

kmoser

8,780
3
24
40

answered Aug 21 '20 at 05:35

Mohammad Jahidul Alam

69
1
2

2

What's the difference? – mesqueeb Jan 07 '21 at 12:10

score 4 · Answer 12 · edited Mar 16 '18 at 05:41

4

The format is hostname/pathname/search

So the url is :

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

For your case

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

So basically the baseurl = hostname = window.location.hostname

edited Mar 16 '18 at 05:41

Arif

6,094
4
49
81

answered Mar 15 '18 at 13:09

Md. Khirul Islam Omi

163
1
10

score 4 · Answer 13 · answered Dec 04 '19 at 12:34

I am surprised that non of the answers consider the base url if it was set in <base> tag. All current answers try to get the host name or server name or first part of address. This is the complete logic which also considers the <base> tag (which may refer to another domain or protocol):

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;
}

Without getting involved with the logic above, the shorthand solution which considers both <base> tag and window.location.origin:

Js:

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

Jquery:

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

Final note: for a local file in your computer (not on a host) the window.location.origin only returns the file:// but the sorthand solution above returns the complete correct path.

This is not the best way. Also, see @DaniilSamoylov's answer, which does incorporate the `` element. — Brad, Dec 09 '19 at 03:43
baseURI returns the base URL of a node so in this case it returns the base path + document name. you will need more codes to remove the document name from that URL. @Brad — Ali Sheikhpour, Dec 09 '19 at 06:04
This solution does _not_ give back the correct base URL when the root directory of the web page is within a sub directory (e.g. http://www.example.com/appRoot/). It only works when the root dir of the webpage is directly located on the webhost's root. — John Ranger, Apr 08 '20 at 02:31

score 4 · Answer 14 · answered Aug 06 '20 at 17:49

4

Here's a short one:

const base = new URL('/', location.href).href;

console.log(base);

answered Aug 06 '20 at 17:49

madebydavid

6,457
2
21
29

cagcak · Answer 15 · 2018-02-03T12:28:12.090

I would recommend for everyone to create HTML base tag in development, then assign the href dynamically, so in production whatever host a client uses, it will automacically addapt to it:

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

So if you are in localhot:8080, you will reach every linked or referenced file from the base, eg: http://localhost:8080/some/path/file.html If you are in www.example.com, it will be http://www.example.com/some/path/file.html

Also note that, every location you're on, you should not use references like globs in hrefs, eg: Parent location causes http://localhost:8080/ not http://localhost:8080/some/path/.

Pretent you reference all hyperlinks as full sentenced without the bas url.

score 2 · Answer 16 · answered Nov 04 '17 at 15:07

2

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

almost same as Jenish answer but a little shorter.

answered Nov 04 '17 at 15:07

Mateen

1,631
1
23
27

score 2 · Answer 17 · answered May 30 '18 at 05:24

I was just on the same stage and this solution works for me

In the view

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

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

In js file you access base as a variable for example in your scenario:

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

I do not remember where I take this information to give credit, if I find it I will edit the answer

score 2 · Answer 18 · answered Jan 10 '22 at 18:34

2

A simpler answer is here, window.location.href = window.location.origin;

answered Jan 10 '22 at 18:34

Syed Waqar Haider

21
4

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Jan 10 '22 at 19:08

score 1 · Answer 19 · answered Mar 15 '18 at 12:37

1

Easy

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

Generates a img with empty src-name forces the browser to calculate the base-url by itself, no matter if you have /index.html or anything else.

answered Mar 15 '18 at 12:37

Grim

1,938
10
56
123

This seems the most elegant solution of all and the only one that doesn't duplicate browser logic, which is nice. I do wonder how portable it is. Is there anything in the HTML specs that would suggest this is guaranteed to work in all browsers? – Matthijs Kooijman Jan 13 '19 at 13:06
@MatthijsKooijman Depends on interpretation of html specs. If you say a filename of length 0 is a valid resource-name ... it does match all browsers. – Grim Jan 13 '19 at 18:17
Understand how browsers are made. You have a couple of programmers, the (indirect) wish to built a browser. Their first source is the html-specs. They read the specs and this is one of the questions they realy like to solve. How would you think they (all) decide on this circumstances? – Grim Jan 13 '19 at 18:20
1

This should be the selected answer. – norcal johnny Aug 09 '20 at 02:28

score 1 · Answer 20 · edited Dec 14 '18 at 05:23

1

Here's something quick that also works with file:// URLs.

I came up with this one-liner:

[((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+"://")]

edited Dec 14 '18 at 05:23

Pang

9,564
146
81
122

answered May 24 '18 at 06:44

Blubbll

17
4

score 1 · Answer 21 · answered Sep 04 '18 at 09:50

1

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

answered Sep 04 '18 at 09:50

Vikas Chaturvedi

477
4
7

1

Please consider adding a description to your answer. – Capricorn Sep 04 '18 at 10:11

score 0 · Answer 22 · answered Dec 05 '17 at 15:34

You mentioned that the example.com may change so I suspect that actually you need the base url just to be able to use relative path notation for your scripts. In this particular case there is no need to use scripting - instead add the base tag to your header:

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

I usually generate the link via PHP.

score 0 · Answer 23 · answered Feb 07 '18 at 17:37

In case anyone would like to see this broken out into a very robust function

    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;
    }

indeed, not sure where I was going with that. I have long since switched to setting that with server-side code — nuander, Jun 18 '18 at 23:21

score -1 · Answer 24 · edited Dec 20 '19 at 00:00

-1

Split and join the URL:

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

edited Dec 20 '19 at 00:00

jkdev

11,360
15
54
77

answered Dec 19 '19 at 21:21

grant sun

120
5

score -2 · Answer 25 · answered Dec 16 '20 at 15:06

Getting the base url |Calls controller from js

function getURL() {

var windowurl = window.location.href;
var baseUrl = windowurl.split('://')[1].split('/')[0]; //split function

var xhr = new XMLHttpRequest();
var url='http://'+baseUrl+'/url from controller';
xhr.open("GET", url);
xhr.send(); //object use to send

xhr.onreadystatechange=function() {
    if(xhr.readyState==4 && this.status==200){
 //console.log(xhr.responseText); //the response of the request
        
 document.getElementById("id from where you called the function").innerHTML = xhr.responseText;
}
  }
}

score -5 · Answer 26 · edited Mar 30 '17 at 05:11

-5

Put this in your header, so it will be available whenever you need it.

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

You will get http://localhost:81/your-path-file or http://localhost/your-path-file.

edited Mar 30 '17 at 05:11

Nathan Tuggy

2,237
27
30
38

answered Mar 30 '17 at 04:02

Asrofil Al Banna

21

How to get base url with jquery or javascript?

26 Answers26

Get Standard/Base URL

Get Absolute Base URL

Set Base URL

Linked