1

This seems like a very basic HTML question, but I cannot find an answer here or elsewhere that actually works.

What I want to do is jump to an id link on the same document without reloading the document.

Here's my setup. The document is http://www.example.com/mydocument.htm/.

<head>
    .
    <base href="http://www.example.com">
    .
    .
</head>

<body>
    <!-- Jump from ... -->
    <div>
        Jump to <a href="#myid">here</a>.
    </div>


    <!-- Jump to ... -->
    <div id="myid">
        <Do stuff>
        <Do more stuff>
    </div>

</body>

This syntax, according to everything I have read on this site and elsewhere, is supposed to result in a jump within the current document without a page reload.

Doesn't work. My browsers (Firefox, Chrome) automatically stick the base href in front of the bookmark, viz: http://www.example.com/#myid, which opens my home page.

Not what I want.

If I change the href from "#myid" to /mydocument.htm#myid, then the jump completes, but the page reloads. Ditto if I use the absolute address: http://www.example.com/mydocument.htm/#myid.

I'm stuck. Any guidance?

Dai
  • 126,861
  • 25
  • 221
  • 322
JimE
  • 13
  • 2
  • but that's exactly what `` is meant to do. Why do you have it? – Dai Apr 27 '18 at 17:56
  • Does it happen if you don't have a `` element in the head section? – Anthony Apr 27 '18 at 17:56
  • Are you sure the page reloads? Like you said, it's not supposed to do that, and I can't reproduce that behavior under my own domain name. – BoltClock Apr 27 '18 at 18:06
  • Possible duplicate of [Make anchor links refer to the current page when using ](https://stackoverflow.com/questions/8108836/make-anchor-links-refer-to-the-current-page-when-using-base) – Anthony Apr 27 '18 at 18:08
  • @Dal - It was added years ago by someone else. I am working on legacy code. Probably would not do it today, but I have 200+ legacy documents that would need to be edited if I changed it. – JimE Apr 27 '18 at 21:06
  • @Anthony - If the base URL is removed, local jumps within the same page behave correctly and the page is not reloaded. Which suggests a fix using an event listener to remove the base URL for local links. "Make anchor links refer to the current page when using " does not solve the reload issue, but it does suggest an approach. Thanks for the tip. – JimE Apr 27 '18 at 21:07
  • @BoltClock - Yes the page reloads every time. But not if the base URL is removed from the document header. So, it is definitely the problem. – JimE Apr 27 '18 at 21:08
  • Or add an onload event listener that removes the base element altogether. – Anthony Apr 27 '18 at 21:09

2 Answers2

1

The <base> element instructs the browser to append the URL in the href to all relative URLs on the page. So having:

<base href="http://www.example.com" />

Means that for :

<a href="#myid">here</a>.

The href is handled as :

http://www.example.com/#myid

Instead of

<current_page>/#myid

You almost certainly don't need that <base> element in the head section, especially based on your further point that using the full URL (which also has http://www.example.com in it) works, meaning your page is already at http://www.example.com and thus doesn't need to make it explicit with <base>.

Alternatively (and I don't actually recommend this, because your use of base seems incorrect), you could change the href of your link to be the current page plus the id hash, like:

<a href="mydocument.htm/#myid">here</a>.

As the browser will render the URL (when applying the base href) to :

http://www.example.com/mydocument.htm/#myid

and thus not try to leave the current page as it will treat it the same as if the base weren't set. (Note that this would only work when you have the base href set to the URL of the actual page's base, and as I mentioned earlier, that would make the base element unnecessary).

https://jsfiddle.net/ouLmvd3g/

If you are considering a javascript solution, since the <base> is apparently never necessary, I would recommend an event listener that removes the base element from the DOM rather than your suggested :

a fix using an event listener to remove the base URL for local links

A simple solution would be:

window.onload=function(){
    var baseElement = document.getElementsByTagName("base")[0];
    baseElement.parentNode.removeChild(baseElement);
}

https://jsfiddle.net/vLa0zgmc/

You could even add a bit of logic to check if the base element's href matches the current page's actual URL base, and only remove when it does. Something like:

var baseElements = document.getElementsByTagName("base");

    if (baseElements.length > 0) {
      var baseElement = baseElements[0];
      var current_url = window.location.toString();
      var base_url = baseElement.getAttribute("href");
      // If the base url and current url overlap, remove base:
      if (current_url.indexOf(base_url) === 0) {
        baseElement.parentNode.removeChild(baseElement);
      }
    }

Example here : https://jsfiddle.net/gLeper25/2/

Anthony
  • 35,330
  • 24
  • 93
  • 158
  • Anthony - Thanks for the prompt response. " Make anchor links refer to the current page when using " does not solve the problem. It tells me how to substitute the current page for the , but not how to keep the document from re-loading after a local jump. Interesting, though. – JimE Apr 27 '18 at 20:51
  • No, it uses both the base and the current page, and shouldn't reload after the local jump. At least in my tests. – Anthony Apr 27 '18 at 21:10
  • Unfortunately removing entirely from most pages causes a lot of problems. Whole rafts of javascript assume . Hummmm. I guess I can try removing it selectively on pages where I need quick local jumps. You have been a big help, many thanks. – JimE Apr 28 '18 at 01:19
0

Thanks to all who responded.

In the end it turns out I was asking the wrong questions. What I needed was a means of jumping to an anchor on the same document without the document reloading. Unfortunately I got fixated on the problem with <base> interfering with the normal <a href....> process.

The actual answer was to use onClick instead, and the code was provided by @Davide Bubz in "Make anchor links refer to the current page when using <base>", and it's simple and elegant, using document.location.hash instead of <a href...>:

<a href="javascript:;" onclick="document.location.hash='test';">Anchor</a>

where "test" is the ID identifying the item to be jumped to.

Several responders pointed to this thread as answering my issues, but I was not smart enough to understand its import until I had read it for the third time. Had I been smarter, I would have saved 6-1/2 hours of wasting my time on trying to fix the <base> problem.

Anyway, problem solved. Thanks to all and especially to Mr. Bubz.

Mr Lister
  • 44,061
  • 15
  • 107
  • 146
JimE
  • 13
  • 2