Nehemias Herrera Nehemias Herrera - 1 year ago 45
HTML Question

how to get the base url in javascript

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
variable with the segments of the url from the
to the
seemed handy

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

with the function

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

Answer Source

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