为什么 anchor href 显示片段的完整路径？

Question

我的锚标签 href 只包含一个片段。我分配了一个点击处理程序。当我单击 link 时，处理程序完成后，页面会加载更高级别的页面。

事实如下：

页面位于http://domain.com/app/path_component
页面定义<base href="http://domain.com/app/">
页面包含：<a href="#fragment">...</a>
jQuery 设置点击处理程序：$('a').on('click', handler)
.htaccess 将服务器处理定向到位于.../app

我没有 returning false，也没有调用 e.stopPropagation() 或 e.preventDefault()，所以我知道浏览器会执行其默认操作并处理 href。我不明白的是为什么它加载了另一个页面？

在跟踪我的处理程序时，我看到 this.href 是“http://domain.com/app/#fragment". That would explain why the parent page is loading, but I don't understand why it was that page and not http://domain.com/app/path_component#fragment”？

我能看到原始 href 的唯一方法是直接检查 href 属性。我想在必要时允许页面加载，但在它只是一个片段时阻止它，所以我将处理程序 return 写为：

return $(this).attr('href')[0] != '#';

为什么这是必要的？我认为片段的默认处理是不返回服务器。

Answer 1

浏览器通过将短link与基本标签中分配的link连接起来来处理短link，因此如果您分配<base href="http://something.com/">所有短link和相关源（即 <img src="...">）将相对于 base 进行处理。 <base> 的主要目的是使您的网页易于移植到另一个站点。

因此，作为解决方案，您需要相对于基础分配锚路径：

<a href="path_component#fragment">

另一种方式是基于js的锚点：

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

解决方案之一是在页面开头使用 javascript 生成基节点并将其作为子节点附加到 <head>：

<script>
  var currPage = window.location.href;

  if (document.getElementsByTagName("base").length === 0) {
        var base = document.createElement("base");
        base.setAttribute("href", currPage);
        document.getElementsByTagName('head')[0].appendChild(base);
    }
  else {
    document.getElementsByTagName("base")[0].setAttribute("href", currPage);
  }

</script>

它应该可以工作，但正如我上面提到的，如果您使用图像源的相对路径，您应该以 ../（即 <img src="../images/image.gif">）开始它们的 links 以获得基于父页面的绝对路径。

为什么 anchor href 显示片段的完整路径？

Why does anchor href show full path for fragment?

html

javascript

anchor

fragment