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 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('/') + '/'; }
To find the base URL of your website, go to the site's front page. What you see in the address bar on your site's front page is the base URL of your website.
Answer: Use the window. location. href Property location. href property to get the entire URL of the current page which includes host name, query string, fragment identifier, etc. The following example will display the current url of the page on click of the button.
The <base> tag specifies the base URL and/or target for all relative URLs in a document. The <base> tag must have either an href or a target attribute present, or both. There can only be one single <base> element in a document, and it must be inside the <head> element.
Base URL: The consistent part or the root of your website's address. For example, http://www.YourDomain.com. Relative URL: The remaining path given after the base URL.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With