How do I set a page's base href in Javascript?

javascript href base
Zach Gardner picture Zach Gardner · Aug 16, 2010 · Viewed 42.5k times · Source

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.

Answer

Zach Gardner picture Zach Gardner · Aug 16, 2010

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>

Related questions

Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More
JavaScript function in href vs. onclick

I want to run a simple JavaScript function on a click without any redirection. Is there any difference or benefit between putting the JavaScript call in the href attribute (like this: <a href="javascript:my_function();window.print();">....&…

Read More
window.location.href and window.open () methods in JavaScript

What is the difference between window.location.href and window.open () methods in JavaScript?

Read More