Как я могу заставить работать ссылки на фрагменты на странице с <base href = "">?

Элемент <base> указывает браузеру добавить URL-адрес в href ко всем относительным URL-адресам на странице. Итак, имея:

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

Означает, что для:

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

href обрабатывается как:

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

Вместо

<current_page>/#myid

Вам почти наверняка не нужен этот элемент <base> в разделе заголовка, особенно на основании вашего дальнейшего замечания, что использование полного URL-адреса (в котором также есть http://www.example.com) работает, то есть ваша страница уже находится на http://www.example.com и, следовательно, не нуждается в сделайте это явным с помощью <base>.

В качестве альтернативы (и я на самом деле не рекомендую это, потому что ваше использование base кажется неправильным), вы можете изменить href вашей ссылки на текущую страницу плюс хеш id, например:

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

Поскольку браузер отобразит URL-адрес (при применении basehref) для:

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

и, таким образом, не пытайтесь покинуть текущую страницу, поскольку она будет относиться к ней так же, как если бы база не была установлена. (Обратите внимание, что это будет работать только тогда, когда у вас есть базовый href, установленный на URL-адрес фактической базы страницы, и, как я упоминал ранее, это сделает базовый элемент ненужным).

https://jsfiddle.net/ouLmvd3g/

Если вы рассматриваете решение javascript, поскольку <base>, по-видимому, никогда не понадобится, я бы порекомендовал прослушиватель событий, который удаляет базовый элемент из DOM, а не предложенный вами:

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

Простое решение:

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

https://jsfiddle.net/vLa0zgmc/

Вы даже можете добавить немного логики, чтобы проверить, соответствует ли href базового элемента фактической базе URL-адресов текущей страницы, и удалить только тогда, когда это произойдет. Что-то вроде:

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);
      }
    }

Пример здесь: https://jsfiddle.net/gLeper25/2/

Спасибо всем, кто откликнулся.

В конце концов, оказывается, я задавал неправильные вопросы. Что мне нужно, так это средство перехода к привязке к тому же документу без перезагрузки документа. К сожалению, я зациклился на проблеме с <base>, мешающей нормальному процессу <a href....>.

Фактический ответ заключался в использовании вместо этого onClick, а код был предоставлен @Davide Bubz в разделе «Сделать ссылки привязки ссылаться на текущую страницу при использовании <base>», и это просто и элегантно, используя document.location.hash вместо <a href...>:

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

где «test» - это идентификатор, идентифицирующий элемент, к которому нужно перейти.

Несколько респондентов указали на эту ветку как на ответ на мои вопросы, но я был недостаточно умен, чтобы понять ее смысл, пока не прочитал ее в третий раз. Если бы я был умнее, я бы сэкономил 6-1 / 2 часа, тратя свое время на попытки исправить проблему <base>.

В любом случае проблема решена. Спасибо всем и особенно господину Бубзу.