？,html"/>
时间戳

首页 > 解决方案 > 如何获得片段链接以在带有 的页面中工作？

html - 如何获得片段链接以在带有 的页面中工作？

问题描述

这似乎是一个非常基本的 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.

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

标签： html

解决方案

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

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

意味着：

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

被href处理为：

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

代替

<current_page>/#myid

您几乎可以肯定不需要<base>head 部分中的那个元素，尤其是基于您进一步指出使用完整 URL（其中也有http://www.example.com）有效，这意味着您的页面已经存在http://www.example.com，因此不需要明确与<base>.

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

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

由于浏览器会将 URL（在应用 时base href）呈现到：

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

因此不要尝试离开当前页面，因为它会将其视为与未设置基础相同。（请注意，这仅在您将 basehref设置为实际页面基础的 URL 时才有效，并且正如我之前提到的，这将使 base 元素变得不必要）。

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与当前页面的实际 URL 基本匹配，并且仅在匹配时删除。就像是：

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/

推荐阅读