base href with javascript

this blog generates its pages by shell script, and it's been a bit of a challenge to make the engine portable, so generated content and the code itself can be run anywhere.

one way this is made easier is by using <base href="<?= $blogroot ?>" />, which tells the user agent to prepend every source and reference with $blogroot. as I developed on Safari, everything worked.

then I asked for some friends to look at it, and it turned out that the base tag doesn't quite work like I'd hoped: you can't use a relative path as your base href, and Firefox enforces this strictly.

there's two options for ﬁxing this: the blog engine itself has to know where it lives on the server, so it can populate the base href correctly, making generated content less portable -or- the output generation could be smarter and append the relative base href to the beginning of every source and reference it sees, making the output code messier.

luckily, if you're ok with requiring that your clients support javascript (which I am), there's a third option. behold:

<script type="text/javascript" id="base_href">
  Node.prototype.insertAfter = function(newNode, refNode) {
    if(refNode.nextSibling) {
      return this.insertBefore(newNode, refNode.nextSibling);
    } else {
      return this.appendChild(newNode);
    }
  }

  var newcontent = document.createElement('base'); 
  newcontent.href = document.baseURI.substring(0, 
    document.baseURI.lastIndexOf('/')) + '<?= $blogroot ?>';

  var here = document.getElementById('base_href');
  here.parentNode.insertAfter(newcontent, here);
</script>

put that in the beginning of your <head> and it will emit the correct absolute base href at runtime.

thanks to Christian Hammond for the idea.

edited on friday february 19^th, 2010 at 21:38 (PST):

unfortunately this blog no longer uses this hack because the base href was interfering with document bookmarks.

edited on friday april 9^th, 2010 at 15:26 (PDT):

this post used to feature a version using document.write() that didn't work in Opera, IE, and Konqueror. while I haven't extensively tested this new version, I expect it to work better.

posted on thursday september 10^th, 2009 at 15:18 (PDT)