Как отобразить другую ссылку в левом нижнем углу при наведении на якорь, чем атрибут href указанного якоря?

Question

Я недавно заметил кое-что о результатах поиска Google. При использовании последней версии Firefox, если вы наводите курсор на ссылку, предоставленную результатами поиска Google, в левом нижнем углу отображается симпатичная ссылка, но если вы просматриваете эту ссылку, вы видите, что ссылка на самом деле является чем-то другим. Ссылка на root ie. google.com с добавленными переменными запроса, которые, как я предполагаю, перенаправляют вас на реальную страницу, когда вы нажимаете на ссылку.

Мне интересно, как это возможно, чтобы отобразить совершенно другую ссылку в левом нижнем углу. Я видел, что есть похожие вопросы, и все предлагают закалить с js или с помощью кнопки. Но мне интересно, если кто-нибудь точно знает, как Google достигает этого?

Редактировать: Давайте рассмотрим пример того, что я имею в виду. Если я ищу: Википедия, это результаты. Ничего особенного, верно?

Если я наведу на ссылку здесь ничего особенного, я ожидаю wikipedia.org

Ха, но я был бы не прав, это реальная ссылка! В Википедии заголовок выделен выше, это ссылка.

А что произойдет, если я использую Ctrl + Click или CMD + Click? Истинная ссылка подвергается критике, и страница открывается в новой вкладке.

Теперь, как этого добиться? Я думаю, что js манипулирует окном браузера, и я не нашел способа сделать именно это.

Примечание: это поведение верно для Firefox и Safari, но не Chrome. На Chrome тег href является реальной ссылкой, но использует атрибут ping.

Answer 1

Должно работать с <a href="http://theLinkInTheBottomLeft">https://theDisplayedLink</a>

. Так как тег 1. предоставляет ссылку href, на которую вы будете перенаправлены, и содержимое в скобках, вы можете отличить видимое от действенный.

Answer 2

Я не могу точно сказать, как Google обрабатывает это, потому что их JS увеличено, но если бы мне пришлось угадывать, я думаю, это было бы что-то вроде этого:

Посмотрев структуру поиска DOM результаты, элемент a имеет href со ссылкой для предварительного просмотра и другой тег ping с действительной ссылкой. При нажатии на JS он устанавливает ping местоположение (предотвращая поведение по умолчанию).

Ниже приведен код, как этого можно достичь.

window.addEventListener('load', () => {
  let element = document.getElementsByTagName('a')[0]
  element.addEventListener('mousedown', (event) => {
    event.target.setAttribute('href', event.target.getAttribute('other'))
  })
})

<a href="http://google.com/" other="http://bing.com/">Link</a>

---

Ниже представлен альтернативный подход, но он не будет работать для среднего щелчка.

window.addEventListener('load', () => {
  let element = document.getElementsByTagName('a')[0]
  element.addEventListener('click', (event) => {
    event.preventDefault()
    let link = event.target.getAttribute('other')
    window.location.href = link
  })
})

<a href="http://google.com/" other="http://bing.com/">Link</a>