使用 location.href="#_ElementId_" 时如何忽略基本 href？答案

【问题标题】：How to ignore base href when using location.href="#_ElementId_"?使用 location.href="#_ElementId_" 时如何忽略基本 href？
【发布时间】：2011-07-31 15:50:52
【问题描述】：

如果一个网页有一个基本的href，那么当我们使用#ElementId时是否可以忽略它，而不刷新页面？

这里有一些代码：

<html>
  <head>
    <base href="http://www.google.com/" />
  </head>
  <body>
    <div id="test">
      Test
    </div>
    <button onclick="location.href='#test'">Back to Test</button>
    <a href="#test">Back to Test!</a>
  </body>
</html>

当我单击按钮或链接时，我希望浏览器将页面带到 div#test。没有 base href 标记，一切正常 - 但是，使用 base-href 标记，如果没有 Javascript 的帮助，我将无法做到这一点。有没有办法以更“自然”的方式做到这一点？

以下是我目前的解决方法...

<html>
  <head>
    <base href="http://www.google.com/" />
    <script type="text/javascript">
      function goToElement(elementId) {
        var baseTag = document.getElementsByTagName("base")[0];
        var existingBaseHref = baseTag.href;
        baseTag.href = "";
        location.href = "#" + elementId;
        baseTag.href = existingBaseHref;
      }
    </script>
  </head>
  <body>
    <div id="test">
      Test
    </div>
    <button onclick="goToElement('test')">Back to Test</button>
    <a onclick="goToElement('test')">Back to Test!</a>
  </body>
</html>

【问题讨论】：

为什么你有基本的href？为什么不直接将 location.hash 设置为 elementId 呢？
@mplungjan - Base-href：不幸的是，历史代码库的原因。 :( 关于 location.hash - 你能提供一个代码示例吗？
Make anchor links refer to the current page when using <base>的可能重复

标签： javascript html anchor

【解决方案1】：

您可能只需要在链接的 href 属性中输出完整的绝对 URL。

例如，您可以在 ASP.NET 中执行类似的操作（使用 AntiXss library）：

<a href="<%= AntiXss.HtmlAttributeEncode(Request.Url.AbsoluteUri) %>#test">
    Link text...
</a>

或 PHP 中的类似内容：

<a href="<?php echo htmlentities($_SERVER['REQUEST_URI'], ENT_QUOTES, 'ISO-8859-1'); ?>#test">
    Link text...
</a>

【讨论】：

这会导致页面重新加载吗？（顺便说一句，感谢您的回答。）就我而言，我不能让页面重新加载（将此添加到问题中。）
不，它不应该导致页面重新加载（如果确实如此，我会感到惊讶）
有效！谢谢您的帮助。我想我现在需要弄清楚如何确定绝对 URL。哈。

【解决方案2】：

这将滚动到 id="test" 的元素，返回 false 将使其停留在页面上。

<a href="#test" onclick="document.getElementById('test').scrollIntoView(); return false">Go to div with id=test</a>

如果不使用脚本或添加服务器上 href 的完整路径，似乎不可能做你想做的事

【讨论】：

【解决方案3】：

我在使用 .这是我在内部页面上工作的解决方案，例如 www.mozilla.org/about

<div>
  <a href="/about#target"></a>
  <p>Content...</p>
  <div id="target">
    Target Div
  </div>
</div>

【讨论】：