我有锚标签，href只包含一个片段。我分配了一个点击处理程序。当我单击链接时，处理程序完成后，页面加载的页面更高。
以下是事实：
- 该页面位于
http://domain.com/app/path_component - 该页面定义了
<base href="http://domain.com/app/"> - 页面包含：
<a href="#fragment">...</a> - jQuery设置了一个点击处理程序：
$('a').on('click', handler) .htaccess将服务器处理定向到服务器上的 PHP 应用程序，网址为 .../app
我没有返回false，也没有调用e.stopPropagation()或e.preventDefault()，所以我知道浏览器会做它的默认事情并处理href。我不明白的是为什么它会加载另一个页面？
在跟踪我的处理程序时，我看到 this.href 是"http://domain.com/app/#fragment"。这可以解释为什么正在加载父页面，但我不明白为什么它是那个页面而不是 http://domain.com/app/path_component#fragment"？
我可以看到原始 href 的唯一方法是直接检查 href 属性。如果有必要，我想允许页面加载，但当它只是一个片段时阻止它，所以我将处理程序返回编写为：
return $(this).attr('href')[0] != '#';
为什么有必要这样做？我认为片段的默认处理是不返回到服务器。
浏览器通过将短链接与基本标签中分配的链接连接起来来处理短链接，因此如果您分配了<base href="http://something.com/">所有短链接和相关来源(即<img src="...">)将相对于base进行处理。该<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">) 用于获取基于父页面的绝对路径。