4

If a webpage has a base href, is there anyway to ignore it when we're using #ElementId, without refreshing the page?

Here's some code:

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

When I click on either the button or the link, I want the browser to bring the page to div#test. Without the base href tag, everything works - However, with the base-href tag, I can't do it without the help of Javascript. Is there a way to do it in a more "natural" way?

Below's a workaround that I have at the moment...

<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>
Taz
  • 3,527
  • 2
  • 33
  • 54
DashK
  • 2,504
  • 1
  • 19
  • 27
  • why do you have the base href? And why not just set location.hash to the elementId ? – mplungjan Apr 07 '11 at 12:30
  • @mplungjan - Base-href: Historic code-base reasons, unfortunately. :( On location.hash - Could you provide a code sample? – DashK Apr 07 '11 at 12:37
  • Possible duplicate of [Make anchor links refer to the current page when using ](http://stackoverflow.com/questions/8108836/make-anchor-links-refer-to-the-current-page-when-using-base) – Michał Perłakowski Jan 15 '16 at 10:03

3 Answers3

2

This will scroll to the element with id="test" and the return false will make it stay on the page.

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

It does not seem to be possible to do what you want without either using script or addIng the full path to the href on the server

mplungjan
  • 134,906
  • 25
  • 152
  • 209
1

You might just have to output the full absolute URL in your link's href attribute.

For example, you could do something like this in ASP.NET (using the AntiXss library):

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

Or something like this in PHP:

<a href="<?php echo htmlentities($_SERVER['REQUEST_URI'], ENT_QUOTES, 'ISO-8859-1'); ?>#test">
    Link text...
</a>
Ian Oxley
  • 10,460
  • 5
  • 39
  • 48
  • Would this cause the page to re-load? (Thanks for answering, BTW.) In my case, I can't let the page reload (Adding this to the question.) – DashK Apr 07 '11 at 12:38
  • No, it shouldn't cause the page to reload (I'd be suprised if it did) – Ian Oxley Apr 07 '11 at 12:40
  • Works! Thanks for the help. I guess I need to figure out how to determine the absolute URL now. Haa. – DashK Apr 07 '11 at 12:46
0

I had a similar issue when using . This was my solution that worked on interior pages, for example www.mozilla.org/about

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