how to get the base url in javascript
Solution 1
Base URL in JavaScript
You can access the current url quite easily in JavaScript with window.location
You have access to the segments of that URL via this locations
object. For example:
// This article:
// https://stackoverflow.com/questions/21246818/how-to-get-the-base-url-in-javascript
var base_url = window.location.origin;
// "http://stackoverflow.com"
var host = window.location.host;
// stackoverflow.com
var pathArray = window.location.pathname.split( '/' );
// ["", "questions", "21246818", "how-to-get-the-base-url-in-javascript"]
In Chrome Dev Tools, you can simply enter window.location
in your console and it will return all of the available properties.
Further reading is available on this Stack Overflow thread
Solution 2
One way is to use a script tag to import the variables you want to your views:
<script type="text/javascript">
window.base_url = <?php echo json_encode(base_url()); ?>;
</script>
Here, I wrapped the base_url with json_encode so that it'll automatically escape any characters to valid Javascript. I put base_url to the global Window so you can use it anywhere just by calling base_url, but make sure to put the script tag above any Javascript that calls it. With your given example:
...
$('#style_color').attr("href", base_url + "assets/css/themes/" + color_ + ".css");
Solution 3
Base URL in JavaScript
Here is simple function for your project to get base URL in JavaScript.
// base url
function base_url() {
var pathparts = location.pathname.split('/');
if (location.host == 'localhost') {
var url = location.origin+'/'+pathparts[1].trim('/')+'/'; // http://localhost/myproject/
}else{
var url = location.origin; // http://stackoverflow.com
}
return url;
}
Solution 4
var baseTags = document.getElementsByTagName("base");
var basePath = baseTags.length ?
baseTags[ 0 ].href.substr( location.origin.length, 999 ) :
"";
Solution 5
This is done simply by doing this variable.
var base_url = '<?php echo base_url();?>'
This will have base url now. And now make a javascript function that will use this variable
function base_url(string){
return base_url + string;
}
And now this will always use the correct path.
var path = "assets/css/themes/" + color_ + ".css"
$('#style_color').attr("href", base_url(path) );
Nehemias Herrera
Updated on July 05, 2022Comments
-
Nehemias Herrera almost 2 years
I am building a website with CodeIgniter, I have various resources that I load with the base_url helper function like this
<link rel="stylesheet" type="text/css" href="'.base_url('assets/css/themes/default.css').'" id="style_color"/>
which produces (i.e. www.mysite.com)
<link rel="stylesheet" type="text/css" href="http://www.mysite.com/assets/css/themes/default.css" id="style_color"/>
I can then swap this resource with another in javascript like this
$('#style_color').attr("href", "assets/css/themes/" + color_ + ".css");
what happens is that it will try to load the resource without using the absolute path generated by php, so my solution was adding a dummy tag in every page with php like this
<div id="base_url" class="'.base_url().'"></div>
I then modified the javascript line to
$('#style_color').attr("href", $('#base_url').attr("class") + "assets/css/themes/" + color_ + ".css");
it does work but it doesn't look elegant at all, so, I would appreciate any help on how to maybe generate this base url from within javascript or any other solution, thanks :)
I preferred a Javascript only solution and since I am using CodeIgniter, a
document.base_url
variable with the segments of the url from theprotocol
to theindex.php
seemed handydocument.base_url = base_url('index.php');
with the function
base_url()
beingfunction base_url(segment){ // get the segments pathArray = window.location.pathname.split( '/' ); // find where the segment is located indexOfSegment = pathArray.indexOf(segment); // make base_url be the origin plus the path to the segment return window.location.origin + pathArray.slice(0,indexOfSegment).join('/') + '/'; }
-
Alejandro about 9 yearsWhat about browser compatibility with this? Is it possible that some browsers (or older ones) this could fail?
-
Schien about 9 yearsthis should be cross browser because the differences are eliminated by a server-side script. this code may not be "portable", meaning that you might have to adjust the path prefix when you move the server.
-
PC. over 4 yearsI am not convinced about this answer being right. base_url is defined in php (server side), how do you get in JS/client side?
-
chantastic over 4 years@PC.
base_url
(in this example) is just the name of my variable. it could bebaseURL
,urlBase
, or anything.