I want to set a page's base href attribute in Javascript based off of the current hostname. I have generated HTML pages that can be viewed on different hostnames, which means generating a base href tag will work in one hostname but will be incorrect in the other.
4 Answers
The correct way of doing this is to do a document.write of the tag based off the current hostname:
Correct:
<script type="text/javascript">
document.write("<base href='http://" + document.location.host + "' />");
</script>
This method has produced correct results in IE, FF, Chrome, and Safari. It produces a (correct) different result than doing the following:
Incorrect:
<script type="text/javascript">
var newBase = document.createElement("base");
newBase.setAttribute("href", document.location.hostname);
document.getElementsByTagName("head")[0].appendChild(newBase);
</script>
-
10There is no reason presented why
document.write
would be “correct” and proper insertion of a node in the document tree would be “incorrect”. The question falls into the category “solving the wrong problem”, but the approach described as “correct” here would often insert abase
tag in a wrong place, to begin with. If the code is in thehead
part, it’s rather useless (why not put the rightbase
tag there as normal HTML?), and if it is executed elsewhere, it will usually insertbase
intobody
. Jun 2, 2013 at 18:19 -
4The "incorrect" method does not actually work. The only way to get the browser to dynamically change its base href is the "correct" method. Dec 18, 2014 at 18:56
-
3Hi! According to my tests in my angular enabled web page, the document.write mode don't seem to add the base tag until it is too late. I have compared the markup when adding it with javascript or hard-coding it in the markup, looks the same but js solution don't apply any base tag functionality even though "looks" like it is in place... Any ideas? Dec 16, 2015 at 15:49
-
11
-
3I'm finding that on initial load, even though document.write is above stylesheet links and other assets, Chrome is first looking for files at the original url, and then trying again using the contents of <base />. For instance, if my original URL is site.dev/account, and the result of the document.write is setting base to site.dev, the assets are first trying to load from /account/, the server returns a 404, then they correctly load from site.dev.– nickfordOct 13, 2016 at 19:35
I think you'd better do it this way
<script type="text/javascript">
document.head.innerHTML = document.head.innerHTML + "<base href='" + document.location.href + "' />";
</script>
As location.hostname
does not return the application context root! You could also log the document.location
on the console console.log
to see all available metadata on document.location
.
-
2This is actually more proper these days (than using
document.write
). On a practical note: this worked for me in jsFiddle whiledocument.write
didn't.– YakovLNov 21, 2018 at 14:11
I have to disagree with the top answer. It does not account for the protocol so it will fail.
A working solution that I have to account for protocol / host / port is the following
var base = document.createElement('base');
base.href = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
document.getElementsByTagName('head')[0].appendChild(base);
This currently works fine in all major browsers including IE11
I have used this to make an npm package that also supports adding a suffix to the end of this base href if anyone is interested
<script>
document.write("<base href='"+ window.location.protocol +'//' + window.location.host + "' >");
</script>
$.serverRoot
to be the relative root of the host (e.g.$.serverRoot = '/myapp/';