Question

这似乎是一个非常基本的HTML问题，但我无法在这里或其他地方找到真正有用的答案。

我想要做的是跳转到同一文档上的id链接而不重新加载文档。

这是我的设置。该文件为http://www.example.com/mydocument.htm/。

<head>
    .
    <base href="http://www.example.com">
    .
    .
</head>

<body>
    <!-- Jump from ... -->
    <div>
        Jump to <a href="#myid">here</a>.
    </div>


    <!-- Jump to ... -->
    <div id="myid">
        <Do stuff>
        <Do more stuff>
    </div>

</body>

根据我在本网站和其他地方阅读的所有内容，这种语法应该会在当前文档中跳转而不会重新加载页面。

不起作用。我的浏览器（Firefox，Chrome）会自动将基本href粘贴在书签前面，即：http://www.example.com/#myid，它会打开我的主页。

不是我想要的。

如果我将href从“#myid”更改为/mydocument.htm#myid，则跳转完成，但页面会重新加载。如果我使用绝对地址，则同上：http://www.example.com/mydocument.htm/#myid。

我被困住了。有什么指导吗？

Answer 1

<base>元素指示浏览器将href中的网址附加到网页上的所有相对网址。所以：

<base href="http://www.example.com" />

表示：

<a href="#myid">here</a>.

href的处理方式为：

http://www.example.com/#myid

而不是

<current_page>/#myid

您几乎肯定不需要头部中的<base>元素，尤其是基于您使用完整网址（其中也包含http://www.example.com）工作的另一点，这意味着您的网页已经在http://www.example.com，因此无需使用<base>明确说明。

或者（我实际上不建议这样做，因为您使用base似乎不正确），您可以将链接的href更改为当前页面加上ID哈希，像：

<a href="mydocument.htm/#myid">here</a>.

由于浏览器会将网址（在应用base href时）呈现给：

http://www.example.com/mydocument.htm/#myid

因此不会尝试离开当前页面，因为它会像处理基础一样对待它。（请注意，只有当您将基本href设置为实际页面基础的URL时，这才会起作用，正如我之前提到的那样，这将使基本元素变得不必要。）

https://jsfiddle.net/ouLmvd3g/

如果你正在考虑一个javascript解决方案，因为<base>显然从来没有必要，我建议一个事件监听器从DOM中删除基本元素而不是你的建议：

使用事件侦听器删除本地链接的基本URL
的修复程序

一个简单的解决方案是：

window.onload=function(){
    var baseElement = document.getElementsByTagName("base")[0];
    baseElement.parentNode.removeChild(baseElement);
}

https://jsfiddle.net/vLa0zgmc/

您甚至可以添加一些逻辑来检查基本元素的href是否与当前页面的实际网址基本匹配，并且只有在删除时才会删除。类似的东西：

var baseElements = document.getElementsByTagName("base");

    if (baseElements.length > 0) {
      var baseElement = baseElements[0];
      var current_url = window.location.toString();
      var base_url = baseElement.getAttribute("href");
      // If the base url and current url overlap, remove base:
      if (current_url.indexOf(base_url) === 0) {
        baseElement.parentNode.removeChild(baseElement);
      }
    }

此处示例：https://jsfiddle.net/gLeper25/2/

Answer 2

感谢所有回复的人。

最后我发现我在问错误的问题。我需要的是在没有文档重新加载的情况下跳转到同一文档上的锚点的方法。不幸的是，我对<base>干扰正常<a href....>进程的问题感到困惑。

实际答案是改为使用onClick，代码由@Davide Bubz提供，＆＃34;使用<base>＆＃34;时，锚链接指向当前页面，并且＆＃39 ; s简单而优雅，使用document.location.hash而不是<a href...>：

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

其中＆＃34;测试＆＃34;是标识要跳转到的项目的ID。

有几位回应者指出这个帖子回答了我的问题，但在我第三次阅读之前，我还不够聪明地理解它的导入。如果我变得更聪明，我会花费6-1 / 2小时浪费时间来解决<base>问题。

无论如何，问题解决了。感谢所有人，尤其感谢Bubz先生。

如何在具有<base href =“”/>的页面中获取片段链接？

2 个答案: