Html base tag breaks the # reference

Question

I am creating an HTML5 application with angular. To work I need to add the base URL in the html header.

<base href="/">

Then when I click en the footnote, it do not redirect to the correct url.

http://micd.herokuapp.com/#fnref2:1

Instead of

http://micd.herokuapp.com/articles/556acc58cbf0d10b000be0c8#fnref2:1

I wonder if you have any clues to make the to fix this.

Thanks !

Answer 1

I am using markdown-it, so I edited rules by adding the pathname to every links.

var md = window.markdownit()
    .use(window.markdownitFootnote);

md.renderer.rules.footnote_ref = function (tokens, idx) {
  var n = Number(tokens[idx].meta.id + 1).toString();
  var id = 'fnref' + n;
  var uri = window.location.pathname;
  if (tokens[idx].meta.subId > 0) {
    id += ':' + tokens[idx].meta.subId;
  }
  return '<sup class="footnote-ref"><a href="' + uri + '#fn' + n + '" id="' + id + '">[' + n + ']</a></sup>';
};

md.renderer.rules.footnote_anchor = function(tokens, idx) {
  var n = Number(tokens[idx].meta.id + 1).toString();
  var id = 'fnref' + n;
  var uri = window.location.pathname;
  if (tokens[idx].meta.subId > 0) {
    id += ':' + tokens[idx].meta.subId;
  }
  return ' <a href="' + uri + '#' + id + '" class="footnote-backref">\u21a9</a>'; /* ↩ */
};

Non specific solution :

$(document).ready(function () {
    var pathname = window.location.pathname;
    $('a').each(function () {
       var link = $(this).attr('href');
       if (link.substr(0,1) == "#") {
           $(this).attr('href', pathname + link);
       }
    });
}