Best IT Recipes

How to get base url with jquery or javascript?

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

The base path can be any of the following examples:

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

Also example may change.

+94
javascript jquery
Aug 08 '14 at 12:04 on
source share
19 answers

This one will help you ...

 var getUrl = window.location; var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
+134
Aug 08 '14 at 12:11
source share

I think it will be good for you

 var base_url = window.location.origin; var host = window.location.host; var pathArray = window.location.pathname.split( '/' );
+86
Aug 08 '14 at 12:22
source share

This will get the base url

 var baseurl = window.location.origin+window.location.pathname;
+22
Jan 14 '15 at 13:26
source share

This is not possible from javascript because it 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 in the javascript of the page, and then use that value ( phpBaseUrl ).

You can then create the URL as follows:

 var loc = window.location; var baseUrl = loc.protocol + "//" + loc.hostname + (loc.port? ":"+loc.port : "") + "/" + phpBaseUrl;
+12
Aug 08 '14 at 13:12
source share

I came across this need in several Joomla projects. The easiest way I've found the hit 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 a value in JavaScript:

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

Not so interesting how to use pure JavaScript, but just does its job.

+5
Aug 08 '14 at 14:18
source share
 var getUrl = window.location; var baseurl = getUrl.origin; //or var baseurl = getUrl.origin + '/' +getUrl.pathname.split('/')[1];

But you cannot say that baseurl () CodeIgniter (or php joomla) will return the same value, since you can change baseurl in the .htaccess file of these platforms.

For example:

If you have a .htaccess file on your local host:

 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 () will return http: // localhost / CodeIgniter /

+5
Sep 15 '18 at 11:15
source share

I had the same problem a while ago, I just needed a base URL. There are many detailed options here, but to get around this just use the window.location object. Actually type this in the browser console and press Enter to select your options there. Well for my case it was simple:

 window.location.origin
+4
Feb 03 '19 at 18:15
source share

I would recommend everyone to create a basic HTML tag in development, and then dynamically assign href, so when working with any host that the client uses, it is automatically added 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> ...

Therefore, if you are in localhot: 8080, you will get access to all related or link files from the database, for example: http://localhost:8080/some/path/file.html If you are on www.example.com, it will be http://www.example.com/some/path/file.html

Also note that in each location you should not use links such as globs in hrefs, for example: The parent location calls http://localhost:8080/ not http://localhost:8080/some/path/ .

Pretend that you link to all hyperlinks as complete sentences without a base URL.

+3
Feb 03 '18 at 12:08
source share

Host Name / Path / Search Format

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 baseurl = hostname = window.location.hostname

+3
Mar 15 '18 at 13:09
source share
 window.location.origin+"/"+window.location.pathname.split('/')[1]+"/"+page+"/"+page+"_list.jsp"

almost the same as Jenish's answer, but a little shorter.

+2
Nov 04 '17 at 15:07
source share

The easiest way to get the base URL in jQuery

 window.location.origin
+2
Mar 14 '19 at 10:13
source share

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

I came up with this line:

 [((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+"://")]
+1
May 24 '18 at 6:44
source share

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

In view

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

In the js file, you access base as a variable, for example, in your script:

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

I don’t remember where I take this information to give credit, if I find it, I will edit the answer

+1
May 30 '18 at 5:24
source share
 var getUrl = window.location; var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
+1
Sep 04 '18 at 9:50
source share

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

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

I usually generate a link through PHP.

0
Dec 05 '17 at 15:34 on
source share

In case someone would like to see it broken into a very reliable 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; }
0
Feb 07 '18 at 17:37
source share

Easily

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

Generates img with an empty src-name causes the browser to calculate the base-url itself, regardless of whether you have /index.html or something else.

0
Mar 15 '18 at 12:37
source share

This is a very old question, but here are the approaches that I personally use ...

Get standard / base URL

As many have said, this works for most situations.

 var url = window.location.origin;


Get absolute base link

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

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


Set Base URL

As a bonus, the base URL can be redefined globally.

 document.head.innerHTML = document.head.innerHTML + "<base href='" + url + "' />";
0
May 7, '19 at 15:22
source share

Put this in your headline so that it is available when 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 .

-3
Mar 30 '17 at 4:02
source share


More articles:


All Articles