Javascript 如何在使用location.href="；时忽略基本href#_ElementId；？_Javascript_Html_Anchor

Javascript 如何在使用location.href="；时忽略基本href#_ElementId；？

javascript html

Javascript 如何在使用location.href="；时忽略基本href#_ElementId；？,javascript,html,anchor,Javascript,Html,Anchor,如果一个网页有一个基本href，那么当我们使用#ElementId时，是否可以忽略它而不刷新页面下面是一些代码： <html> <head> <base href="http://www.google.com/" /> </head> <body> <div id="test"> Test </div> <button onclick="locati

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


函数goToElement（elementId）{
var baseTag=document.getElementsByTagName（“base”）[0]；
var existingBaseHref=baseTag.href；
baseTag.href=“”；
location.href=“#”+elementId；
baseTag.href=existingBaseHref；
}
试验
返回测试
回到测试！

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

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

或类似于PHP中的内容：

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

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

如果不使用脚本或不向服务器上的href添加完整路径，似乎不可能执行您想要的操作。这是我在内部页面上使用的解决方案，例如www.mozilla.org/about

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


内容
目标部门

为什么您有基本href？为什么不将location.hash设置为elementId？@mplungjan-Base href:Historic code Base reasons，不幸的是：（在location.hash上-你能提供一个代码示例吗？这可能会导致页面重新加载吗？（谢谢回答，顺便说一句）在我的情况下，我不能让页面重新加载（将此添加到问题中）。不，它不应该导致页面重新加载（如果确实如此，我会感到惊讶）很好！谢谢你的帮助。我想我现在需要弄清楚如何确定绝对URL。哈哈。

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