Как открыть все ссылки за пределами сайта в новом окне, за исключением конкретной ссылки?

#javascript

Вопрос:

На моем сайте у меня есть несколько ссылок, которые создаются динамически с помощью JS. Не все из них содержат значение href, поэтому я добавляю значение href динамически. Я использую javascript:; в качестве этого значения.

Теперь мне нужно иметь возможность открывать все ссылки, находящиеся не на моем хосте, в новом окне. Очевидно, javascript:; что это не мой хост, поэтому любая ссылка, указанная в атрибуте href, откроется в новом окне.

В приведенном ниже фрагменте я пытаюсь предотвратить это, но не получаю желаемого результата.

Как мне перенести все ссылки с сайта на новую вкладку, кроме указанной мной?

 document.querySelectorAll("a:not(a[href])").forEach(element =gt; {  element.setAttribute("href", "javascript:;") });  var all_links = document.querySelectorAll('a'); for (var i = 0; i lt; all_links.length; i  ) {  var a = all_links[i];  if (a.hostname != location.hostname || a.getAttribute("href") !== 'javascript:;') {  a.rel = 'noopener';  a.target = '_blank';  } } 
 lt;a href="https://yahoo.com"gt;Yahoo!lt;/agt; lt;hrgt; lt;agt;something elselt;/agt; 

Комментарии:

1. Зачем переоценивать этот target="_blank" атрибут использования для ваших ссылок (тегов привязки). Теперь, когда ваши посетители нажимают на эту ссылку, она откроется в новом окне или вкладке (в зависимости от того, какой веб-браузер они используют и как они настроили этот браузер).

2. Потому что вы не знаете, сколько ссылок у меня на сайте. Гораздо проще управлять всем сразу, чем управлять тысячами ссылок по отдельности.

3. НО вы сказали, что сгенерировали их динамически, так что сделайте это на генераторе? Не пытаясь придираться, а больше пытаясь понять эту часть проблемы.

4. Почему вы добавляете href атрибуты (например href="javascript:;" ) к якорям, которые в них не нуждаются?

5. Похоже, вам следует просто использовать CSS для этого вместо добавления избыточных атрибутов. a:not([href]) { cursor: pointer; } например

Ответ №1:

Похоже, это было лучшее решение…

Если вы проверите каждую ссылку, вы увидите , что есть внешняя ссылка _blank , есть внутренняя ссылка _self и есть ссылка с href="javascript:;" _self .

 document.querySelectorAll("a:not(a[href])").forEach(element =gt; {  element.setAttribute("href", "javascript:;") });  let all_links = document.querySelectorAll('a');  for (var i = 0; i lt; all_links.length; i  ) {  let anchors = all_links[i];  if (anchors.getAttribute('href') == 'javascript:;' || anchors.hostname == location.hostname) {  anchors.target = "_self";  } else {  anchors.target = "_blank";  } } 
 lt;a href="https://yahoo.com"gt;External Link (Yahoo!)lt;/agt; lt;hrgt; lt;a href="/questions/69563273/change-the-font-and-the-line-spacing-of-a-style"gt;Change the font and the line spacing of a style (SO Question)lt;/agt; lt;hrgt; lt;agt;anchor without href (Goes nowhere)lt;/agt;