Html base 标签破坏了 # 引用

Question

我正在使用 angular 创建一个 HTML5 应用程序。为了工作，我需要在 html header.

中添加基础 URL

<base href="/">

然后当我点击脚注时，它不会重定向到正确的 url。

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

而不是

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

我想知道你是否有任何线索来解决这个问题。

谢谢！

Answer 1

我正在使用 markdown-it，所以我通过将路径名添加到每个链接来编辑规则。

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>'; /* ↩ */
};

非特定解决方案：

$(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);
       }
    });
}

Html base 标签破坏了 # 引用

Html base tag breaks the # reference

html

base

angularjs

meanjs