logo标签列表

如何在使用location.href="#_ElementId_"时忽略基础href？

javascripthtmlanchor
4
如果网页有基础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
@mplungjan - Base-href: 历史代码库的原因，不幸的是。 :( 关于location.hash - 你能提供一个代码示例吗？ - DashK
可能是使用<base>时使锚链接引用当前页面的重复内容。 - Michał Perłakowski
3个回答
2

这将滚动到id为“test”的元素，并且return false使其停留在页面上。

<a href="#test" onclick="document.getElementById('test').scrollIntoView(); return false">跳转到id为test的div</a>

似乎没有办法实现你想要的功能，除非使用脚本或者在服务器上添加完整路径到href。

1

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

例如，在ASP.NET中，你可以使用AntiXss库来实现以下操作：

<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>
这会导致页面重新加载吗？（顺便感谢回答。）在我的情况下，我不能让页面重新加载。（将此添加到问题中。） - DashK
不会的，它不应该导致页面重新加载（如果它真的这样做了，我会感到惊讶）。 - Ian Oxley
可以了！感谢您的帮助。我想现在需要弄清楚如何确定绝对URL。哈哈。 - DashK
0

当我使用 时，我遇到了类似的问题。 这是我的解决方案，适用于内部页面，例如www.mozilla.org/about。

<div>
  <a href="/about#target"></a>
  <p>Content...</p>
  <div id="target">
    Target Div
  </div>
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接