Question

如果一个网页有一个基本的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。没有基本的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>

Answer 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>

Answer 2

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

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

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

Answer 3

使用时我遇到了类似的问题。这是我在内页上工作的解决方案，例如www.mozilla.org/about

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

使用location.href =“#_ ElementId_”时如何忽略基本href？

3 个答案: