how to get the base url in javascript

how to get the base url in javascript  using -'javascript,php,html,css,codeigniter'

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.

<link rel="stylesheet" type="text/css" href="" 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 the protocol to the index.php seemed handy

document.base_url = base_url('index.php');

with the function base_url() being

function 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('/') + '/';


asked Sep 15, 2015 by Charissa16R
0 votes

5 Answers

0 votes

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:

var base_url = window.location.origin;
// ""

var host =;

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

answered Sep 15, 2015 by ConnorBroyle
0 votes

One way is to use a script tag to import the variables you want to your views:

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");
answered Sep 15, 2015 by LeilaLockett
0 votes
var baseTags = document.getElementsByTagName("base");
var basePath = baseTags.length ? 
    baseTags[ 0 ].href.substr( location.origin.length, 999 ) : 
answered Sep 15, 2015 by BerAngliss
0 votes

You can make PHP and JavaScript work together by generating the following line in each page template:

Then you can refer to document.mybaseurl anywhere in your JavaScript. This saves you some debugging and complexity because this variable is always consistent with the PHP calculation.

answered Sep 15, 2015 by HenCochrane
0 votes

This is done simply by doing this variable.

var 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) );
answered Sep 15, 2015 by JacPulleine