The base is dynamically set in php when an HTML page is built:
$base_line = '<base href="' . $some_path . '/" /> ';
echo $base_line;
Now that I am in the HTML page I need to access this information ($some_path) and after searching for a few hours I don't seem to find an answer. Please note that the loaded HTML page has a URL that is not related to the base and I don't have access to the PHP code to modify it. The loaded page could have a URL like: http://xyz.com/index.php, but all other links in the page will be based on the value set by the base so I can't get the base using the page URL.
I suppose I could grab one of the elements like an image and dissect it using DOM to find the base, but there should be an easier way to do this. Any ideas?
Using window.location doesn't work in this situation as it will return what is related to the loaded page URL and not what has been set as base within it.
Update 3
As @jorgecasar mentioned in his answer below, there is now a property, baseURI
on every Node
(which includes every Element
).
Calling document.baseURI
will get you the base path to the page, taking into account the <base>
tag.
Note that it is a recent-ish property that is supported by all modern browsers, but if you are using older browsers you might either want to stick with the older answers or make sure you have a poly- or ponyfill for it (Babel's standard polyfill seems to include one, though I couldn't find specific documentation saying as much).
Also, note that document.baseURI
will give you a fully-qualified absolute path, whereas getting the href
attribute from <base>
will give you the exact value you provided, so there may be a slight difference in the usage of the two.
Original
If you want to get the value of the base element, you can do something like:
var baseHref = document.getElementsByTagName('base')[0].href
Or to be a little safer:
var bases = document.getElementsByTagName('base');
var baseHref = null;
if (bases.length > 0) {
baseHref = bases[0].href;
}
Update: a more concise way would be:
const baseHref = (document.getElementsByTagName('base')[0] || {}).href;
baseHref
may be null if it doesn't have a <base>
.
Update 2: Instead of using getElementsByTagName()
, use querySelector()
:
var base = (document.querySelector('base') || {}).href;
console.log(base);
<base href="http://www.google.com"/>
No need for jquery, jqlite, or obsolete APIs. Use the newer querySelector
API:
var base = document.querySelector('base');
var baseUrl = base && base.href || '';
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