Как браузеры отображают целевой URL ссылки

Question

Если вы выполните поиск в Google по какой-либо строке, браузер отобразит результаты поиска в виде кликабельных ссылок. Теперь вот мой вопрос. Если вы наведите указатель мыши на эти ссылки, в нижней левой части экрана вы сможете увидеть место, куда браузер переместит вас, если вы нажмете на него. Я хочу знать, как браузер это делает.

Я не думаю, что результаты поиска на самом деле основаны на тегах привязки HTML. По крайней мере, это то, что я чувствую. Но даже в этих случаях целевой URL-адрес отображается при каждом наведении на ссылки.

Пожалуйста, поделитесь своими мыслями о том, как это делается. Мне нужно сделать то же самое в коде js.

-> Спасибо за ваши ответы. Есть причина, почему я должен был спросить это. Я должен включить перетаскивание между веб-страницей, которую я собираюсь показать в браузере SWT и графическим интерфейсом Java. Чтобы сделать это, в событии mousedown я запускаю код JavaScript. Это в основном получает атрибут HREF для элемента привязки, по которому щелкнул пользователь. ** Теперь вот подвох. Если я открою google.com и нажму на ссылку ИЗОБРАЖЕНИЕ,YOUTUBE,GMAIL,DRIVE, целевой URL будет в порядке. Но если я попытаюсь навести курсор мыши на любой из результатов поиска в Google ИЛИ в нашем оригинальном приложении для тонкого клиента, которое нам нужно включить для перетаскивания, ссылка не появится. Тем не менее, браузер внизу показывает целевую ссылку. Я сбит с толку. Это причина, почему я думаю, что это не тег привязки.

Я попытался зарегистрировать onmousedown с помощью следующего кода для всех якорных элементов. Но с этим, если пользователь делает mousedown на любом из результатов поиска... никакое окно предупреждения не появлялось.

var elements = document.getElementsByTagName('a');
for(var i=0;i<elements.length;i++)
{
    elements[i].onmousedown = function()
    { 
          alert(this.getAttribute('href'));
    }
} 

Answer 1

Я не думаю, что результаты поиска на самом деле основаны на тегах привязки HTML. По крайней мере, это то, что я чувствую.

Вы чувствуете себя не так. Результаты поиска <a> элементы.

Но даже в этих случаях целевой URL-адрес отображается при каждом наведении на ссылки.

Браузер должен знать, куда идет ссылка. Он может заставить свой интерфейс делать практически все, что ему нравится.

Пожалуйста, поделитесь своими мыслями о том, как это сделано..

С нативным кодом

Мне нужно сделать то же самое в коде JS.

window.status = element.href в случае наведения мыши.

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

Answer 2

Если вы посмотрите на исходный код страницы поиска Google, вы увидите, что ссылки имеют формат

<a onmousedown="return rwt(...)" href="http://somelink.com/somepath/">...</a>

• Первоначально href свойство ссылки является правильным, поэтому оно отображается правильно при наведении курсора.
• Тем не менее, он мутирует в момент нажатия кнопки Google rwt функция, которая изменяет href собственность на http://www.google.com/url?... URL.
• Эта мутация происходит, когда мышь нажимают - как раз перед тем, как браузер переходит по ссылке (что происходит, когда кнопка отпущена).

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

Answer 3

Вы можете изменить строку состояния следующим образом: href - это текст в строке состояния, и когда пользователь щелкает ссылку, он изменяется на реальный URL:

    <a href="status bar" onmousedown="this.href='real page';">Link</a>

Answer 4

Результаты поисковой системы, по крайней мере, от Google, отображаются в виде тегов привязки HTML. Не нужно угадывать, проверьте HTML-источник страницы поиска.

Итак, часть о показе ссылки в строке состояния при наведении курсора, это стандартное поведение (я вижу ссылку на ваш SO-профиль, когда наведите курсор на ваше имя).

Я собираюсь сделать скачок и предположить, что вы хотите выяснить, как сделать ссылку в качестве тега привязки, но все же делать некоторые вещи javascripty вместо поведения тега привязки по умолчанию. Например, как Google прикрепляет информацию об отслеживании к URL-адресу, а не просто открывает URL-адрес результатов поиска во вкладке.

Чтобы сделать это, вам нужно прикрепить обработчик события к тегу привязки, чтобы захватить событие "click", предотвратить распространение события реального щелчка и вместо этого делать свои вещи. Таким образом, HTML выглядит как якорный тег, но когда вы щелкаете по нему, это весь ваш javascript.

Вы найдете множество ссылок, чтобы сделать это по таким вопросам, как jQuery: Захватите привязку href onclick и отправьте асинхронно или просто простой поиск в Google о том, как перехватить привязку события click / href.

Надеюсь это поможет.