#html #svelte
Вопрос:
У меня есть небольшое одностраничное приложение с несколькими внутренними ссылками и несколькими внешними ссылками. Я хочу, чтобы все внешние ссылки автоматически открывались на новой вкладке, поэтому я настроил html следующим образом:
<base target="_blank" />
Это отлично работает в chrome. Когда я нажимаю ссылки на панели навигации, мой сайт переходит на ту же вкладку, а когда я нажимаю на внешнюю ссылку, она послушно открывается на новой вкладке.
Однако, когда я посещаю свой веб-сайт с firefox (протестировано несколько версий), каждая ссылка, даже внутренняя на моей панели навигации, открывается на новой вкладке.
Как я могу исправить это, чтобы во всех браузерах на новых вкладках открывались только внешние ссылки? Спасибо
Комментарии:
1. Вы пробовали быть откровенным в ссылках на навигационную панель? Например, использовать
target="_self"
на них.
Ответ №1:
Статическое решение состояло бы в том, чтобы быть явным для внутренних ссылок, то есть добавлять target="_self"
к ним.
Если вы этого не хотите, Javascript также может помочь, в зависимости от ваших настроек.
Предполагая, что все ваши внутренние ссылки являются относительными или, по крайней мере, абсолютными ссылками сервера, и предполагая, что ваша страница статична (например, ссылки не добавляются на страницу после DOMContentLoaded
), следующий фрагмент Javascript решит эту задачу:
document.addEventListener('DOMContentLoaded', () => {
for (const externalLink of document.querySelectorAll('a[href^=http]'))
externalLink.target = '_blank';
})
<a href="https://google.com">Google</a>
<a href="/">Some internal link</a>
Как указал другой чувак, конечно, это работает только в том случае, если ваши ссылки доступны из документа (а не если они находятся внутри Царства теней).
Комментарии:
1. Не обязательно, если svelte скомпилирован как пользовательские html-компоненты с теневым dom
2. Даунвоте за предложение добавить глобальную манипуляцию dom JavaScript, когда инструментом выбора является платформа на основе компонентов
Ответ №2:
Согласно комментарию @connexo, я решил проблему, прямо заявив
target="_self"
в ссылках навбара.
Комментарии:
1. Я добавил это в свой ответ вместе с альтернативой Javascript.
Ответ №3:
Вам необходимо установить целевой объект специально для внешних ссылок, если вы хотите переопределить функциональность браузера по умолчанию. Создайте компонент ссылки, который делает это.