当我使用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" -->
我在这个网站找到了一个解决方案：使用基本href和锚点，它不需要jQuery，并且这是可行的代码片段:
<base href="https://example.com/">
<a href="/test">/test</a>
<a href="javascript:;" onclick="document.location.hash='test';">Anchor</a>或者没有内联JavaScript，像这样：
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')
})
}
})
在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);
});
});
一点 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);
}
});
}
您也可以提供绝对URL：
<base href="https://example.com/">
<a href="/test#test">test</a>
与其这样
<a href="#test">test</a>
以下是基于jQuery的更简短版本，我在生产环境中使用并且效果很好。
$().ready(function() {
$("a[href^='\#']").each(function() {
this.href = location.href.split("#")[0] + '#' + this.href.substr(this.href.indexOf('#')+1);
});
});
jQuery时建议使用jQuery是不被赞同的。 - Ruan Mendes恐怕没有办法解决这个问题，除非使用服务器端或浏览器端脚本。你可以尝试以下纯JavaScript（无jQuery）实现：
document.addEventListener("click", function(event) {
var element = event.target;
if (element.tagName.toLowerCase() == "a" &&
element.getAttribute("href").indexOf("#") === 0) {
element.href = location.href + element.getAttribute("href");
}
});<base href="https://example.com/">
<a href="/test">/test</a>
<a href="#test">#test</a>与其他答案不同，它还适用于动态生成的（即使用JavaScript创建的）a元素。
function generateAnchorLink($anchor) {
$currentURL = "//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}";
$escaped = htmlspecialchars($currentURL, ENT_QUOTES, 'UTF-8');
return $escaped . '#' . $anchor;
}
在代码中使用它的方式如下：
<a href="<?php echo generateAnchorLink("baz"); ?>">baz</a>
#：document.addEventListener("click", function(event) {
var element = event.target;
if (element.tagName.toLowerCase() == "a" &&
element.getAttribute("href").indexOf("#") === 0) {
my_href = location.href + element.getAttribute("href");
my_href = my_href.replace(/#+/g, '#');
element.href = my_href;
}
});
document.addEventListener('DOMContentLoaded', function() {
// Get the current URL, removing any fragment
var documentUrl = document.location.href.replace(/#.*$/, '')
// Iterate through all links
var linkEls = document.getElementsByTagName('A')
for (var linkIndex = 0; linkIndex < linkEls.length; linkIndex++) {
var linkEl = linkEls[linkIndex]
// Ignore links that don't begin with #
if (!linkEl.getAttribute('href').match(/^#/)) {
continue;
}
// Convert to an absolute URL
linkEl.setAttribute('href', documentUrl + linkEl.getAttribute('href'))
}
})
您可以在链接标签内使用一些 JavaScript 代码。
<span onclick="javascript:var mytarget=((document.location.href.indexOf('#')==-1)? document.location.href + '#destination_anchor' : document.location.href);document.location.href=mytarget;return false;" style="display:inline-block;border:1px solid;border-radius:0.3rem"
>Text of link</span>
用户点击时它是如何工作的？
mytarget中。否则，保持页面URL不变。mytarget变量存储的（修改或未更改的）URL。除了使用 <span> 标记外，您还可以使用 <div> 或甚至是 <a> 标记。
建议避免使用 <a> 标记，以避免在 JavaScript 被禁用或不起作用时出现任何意外的重定向，并使用一些 CSS 样式模拟您的 <a> 标记的外观。
<a>标签，不要忘记在JavaScript代码的末尾添加return false;并将href属性设置为<a onclick="这里是JavaScript代码;return false;" href="javascript:return false;">...</a>。
<a href="foo#baz">。 - BalusChttp://server/并告诉它导航到#baz，它将转到http://server/#baz。这就是相对URL的工作原理，以及使用<base>的效果，它会更改相对于哪个URL进行定位的基础部分。如果这不是您想要的结果，则您的链接不应该是相对的，或者它应该相对于基础的href（foo#baz）。 - Ruan Mendeshref="#xyz"总是指当前页面上的锚点，而不是完全不同的页面。毕竟 "#" 的整个意义就是跳转到文档的某个部分，而不是加载另一个页面。事实上，使用<base href可以使 "#" 自身（没有任何路径组件）在其他情况下不允许该行为的情况下加载完全不同的页面，我认为这不仅是技术上的缺陷，甚至是安全漏洞。 - Leslie Krause