使用<base>时,使锚链接指向当前页面

Question

当我使用html <base>标记为页面上的所有相对链接定义基本URL时,锚链接也直接引用基本URL.有没有办法设置基本URL仍然允许锚链接引用当前打开的页面？

例如,如果我有一个页面http://example.com/foo/:

---

目前的行为:

<base href="http://example.com/" />
<a href="bar/">bar</a> <!-- Links to "http://example.com/bar/" -->
<a href="#baz">baz</a> <!-- Links to "http://example.com/#baz" -->

期望的行为:

<base href="http://example.com/" />
<a href="bar/">bar</a> <!-- Links to "http://example.com/bar/" -->
<a href="#baz">baz</a> <!-- Links to "http://example.com/foo/#baz" -->

Answer 1

我在这个网站上找到了一个解决方案:using-base-href-with-anchors不需要jQuery,这里有一个工作片段:

<base href="https://example.com/">

<a href="/test">/test</a>
<a href="javascript:;" onclick="document.location.hash='test';">Anchor</a>

或没有内联js,像这样:

document.addEventListener('DOMContentLoaded', function(){
  var es = document.getElementsByTagName('a')
  for(var i=0; i<es.length; i++){
    es[i].addEventListener('click', function(e) {
      e.preventDefault()
      document.location.hash = e.target.getAttribute('href')
    })
  }
})

Answer 2

基于@James Tomasino的回答,这个更有效率,解决了url中的双哈希和语法错误的错误.

$(document).ready(function() {
    var pathname = window.location.href.split('#')[0];
    $('a[href^="#"]').each(function() {
        var $this = $(this),
            link = $this.attr('href');
        $this.attr('href', pathname + link);
    });
});

Answer 3

一点点jQuery可能会帮助你.尽管base href正在按预期工作,但如果希望以锚(#)开头的链接完全相对,则可以劫持所有链接,检查href属性以查找以#开头的属性,并使用当前URL重建它们.

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