当我使用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" -->
在Joram van den Boezem的答案的基础上构建，但使用纯JavaScript：
document.addEventListener('DOMContentLoaded', function(){
let pathname = location.href.split('#')[0];
[].forEach.call(document.querySelectorAll("a[href^='#']"), function(a) {
a.href = pathname + a.getAttribute("href");
});
});
从问题中给出的示例来看，为了实现所需的行为，我并不认为需要使用“base”标签。
以下代码将提供所需的行为：
<a href="/bar/">bar</a> <!-- Links to "http://example.com/bar/" -->
<a href="#baz">baz</a> <!-- Links to "http://example.com/foo/#baz" -->
诀窍是在字符串 href="/bar/" 的开头使用“/”。
如果您正在使用Angular 2或更高版本（并且只针对Web），您可以执行以下操作：
document = document; // Make document available in template
<a [href]="document.location.pathname + '#' + anchorName">Click Here</a>
<a href="foo#baz">。 - BalusChttp://server/并告诉它导航到#baz，它将转到http://server/#baz。这就是相对URL的工作原理，以及使用<base>的效果，它会更改相对于哪个URL进行定位的基础部分。如果这不是您想要的结果，则您的链接不应该是相对的，或者它应该相对于基础的href（foo#baz）。 - Ruan Mendeshref="#xyz"总是指当前页面上的锚点，而不是完全不同的页面。毕竟 "#" 的整个意义就是跳转到文档的某个部分，而不是加载另一个页面。事实上，使用<base href可以使 "#" 自身（没有任何路径组件）在其他情况下不允许该行为的情况下加载完全不同的页面，我认为这不仅是技术上的缺陷，甚至是安全漏洞。 - Leslie Krause