Сделать привязную привязку ссылаться на текущую страницу при использовании <base>

Когда я использую тег html <base> для определения базового URL-адреса для всех относительных ссылок на странице, ссылки на привязку также относятся непосредственно к базовому URL-адресу. Есть ли способ установить базовый URL-адрес, который по-прежнему позволяет привязывать ссылки к текущей открытой странице?

Например, если у меня есть страница в http://example.com/foo/:

Текущее поведение:

<base href="#" onclick="location.href='http://example.com/'; return false;" />
<a href="bar/">bar</a> <!-- Links to "http://example.com/bar/" -->
<a href="#baz">baz</a> <!-- Links to "http://example.com/#baz" -->

Желаемое поведение:

<base href="#" onclick="location.href='http://example.com/'; return false;" />
<a href="bar/">bar</a> <!-- Links to "http://example.com/bar/" -->
<a href="#baz">baz</a> <!-- Links to "http://example.com/foo/#baz" -->

Ответ 1

я нашел решение на этом сайте: using-base-href-with-anchors, для которого не требуется jQuery, и вот рабочий фрагмент:

<base href="https://example.com/">

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

Ответ 2

Немного jQuery, вероятно, поможет вам в этом. Хотя base href работает по желанию, если вы хотите, чтобы ваши ссылки, начинающиеся с привязки (#), были полностью относительными, вы могли захватить все ссылки, проверить свойство href для тех, кто начал С#, и перестроить их с использованием текущего URL.

$(document).ready(function () {
    var pathname = window.location.href;
    $('a').each(function () {
       var link = $(this).attr('href');
       if (link.substr(0,1) == "#") {
           $(this).attr('href', pathname + link);
       }
    });
}

Ответ 3

Основываясь на ответе @James Tomasino, этот немного более эффективен, решает ошибку с двойными хэшами в URL-адресе и синтаксическую ошибку.

$(document).ready(function() {
    var pathname = window.location.href.split('#')[0];
    $('a[href^="#"]').each(function() {
        var $this = $(this),
            link = $this.attr('href');
        $this.attr('href', pathname + link);
    });
});

Ответ 4

Здесь еще более короткая версия на основе jQuery, которую я использую в рабочей среде, и она хорошо работает для меня.

$().ready(function() {
  $("a[href^='\#']").each(function(){ 
    this.href=location.href.split("#")[0]+'#'+this.href.substr(this.href.indexOf('#')+1);
  });
});

Ответ 5

Я боюсь, что решить эту проблему невозможно без какой-либо стороне сервера или браузера script. Вы можете попробовать следующую реализацию JavaScript (без jQuery):

document.addEventListener("click", function(event) {
  var element = event.target;
  if (element.tagName.toLowerCase() == "a" && 
      element.getAttribute("href").indexOf("#") === 0) {
    element.href = location.href + element.getAttribute("href");
  }
});

<base href="https://example.com/">

<a href="/test">/test</a>
<a href="#test">#test</a>

Ответ 6

Если вы используете PHP, вы можете использовать следующую функцию для создания якорных ссылок:

function generateAnchorLink($anchor) {
  $currentURL = "//{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}";
  $escaped = htmlspecialchars($currentURL, ENT_QUOTES, 'UTF-8');
  return $escaped . '#' . $anchor;
}

Используйте его в коде:

<a href="<?php echo generateAnchorLink("baz"); ?>">baz</a>

Ответ 7

Чтобы предотвратить множественные # в URL-адресе:

         document.addEventListener("click", function(event) {
          var element = event.target;
          if (element.tagName.toLowerCase() == "a" && 
            element.getAttribute("href").indexOf("#") === 0) {
            my_href = location.href + element.getAttribute("href");
            my_href = my_href.replace(/#+/g, '#');
            element.href = my_href;
          }
        });

Ответ 8

Если вы используете Angular 2+ (и только таргетинг в Интернете), вы можете сделать это:

component.ts

document = document; // Make document available in template

component.html

<a [href]="document.location.pathname + '#' + anchorName">Click Here</a>