Как переопределить тег <base> без удаления самого тега?

Я пытаюсь добавить некоторые хеш-ссылки (в формате таблицы содержимого, чтобы облегчить навигацию по веб-страницам) на этот сайт, в котором используется тег <base>.

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

Есть ли способ обойти базовый тег и выполнить это?

Ответ 1

Эффект тега base является глобальным для документа, и единственным способом переопределить эффект <base href="..."> является использование абсолютных URL-адресов.

Вы можете использовать window.location в JavaScript, чтобы получить URL-адрес самой страницы, если документ был получен через HTTP. И вы можете использовать его для создания абсолютных URL-адресов.

Тег base обычно не нужен в эти дни. Лучше использовать серверные технологии, позволяющие вам создавать адреса из одного или нескольких базовых адресов. Так что, возможно, лучший подход - избавиться от тега.

Ответ 2

Вы можете "исправить" это с помощью javascript и jQuery -

// get all the internal anchors inside #article 
$('#article a').each(
        function() {
            // get the href attribute
            href = $(this).attr('href');
            // does it have a href?
            if (href) {
                // does it have an internal anchor?
                if (href.match(/#/i)) {
                    // append window.location and write back to the href Attribute
                    new_href = window.location + href;
                    $(this).attr('href', new_href);
                }
            }
        }
    );

Ответ 3

Добавление /, прежде чем ссылка должна выполнить эту работу. Скажем, у вас есть <base href="/assets/images/" />. Если вы используете <img src="logo.png" />, то он загружает /assets/images/logo.png. В противном случае, если вы используете <img src="/logo.png" />, он загружает /logo.png из корневого каталога.

Ответ 4

В качестве небольшой альтернативы, чтобы иметь локальные URL-адреса и поддерживать базовый href, вы можете попробовать это.

$('a.local').each(
    function () {
		// get the href attribute
		var href = $(this).attr('href');
		// does it have a href?
		if (href) {
			var lastSlash = window.location.toString().lastIndexOf("/");
			var new_href = window.location.toString().substr(0, lastSlash + 1) + href;
			$(this).attr('href', new_href);
		}
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<base href="#" onclick="location.href='http://www.google.com'; return false;">
<a class="local" href="mylocalpage.html">local page</a>
<a href="pageOnRemoteServer.html">remote page</a>