Как мой браузер узнал, что я посетил страницу, если URL перенаправляет?

Question

Как Chrome, Safari, Firefox или другие браузеры узнают, что вы посетили целевой URL-адрес ссылки для перенаправления?

Мне всегда было интересно, что браузеры знают URL, на который попадает перенаправляющий URL, и применяют к ссылке посещенный стиль.

Чтобы понять, что я спрашиваю:

• Введите случайное ключевое слово в Google.
• Найдите синюю ссылку в результатах поиска. Не нажимайте на него.
• Скопируйте целевой URL (обычно пишется зеленым цветом под ссылкой).
• Откройте новое окно / вкладку, вставьте целевой URL в адресную строку и нажмите Enter.
• Вернитесь к результатам поиска Google, и сразу же ссылка станет посещаемой и станет фиолетовой.

Тем не менее, ссылка на страницу google.com/url... Есть ли что-то, что Google добавляет в свою разметку, чтобы сообщить браузеру, с какого URL-адреса нужно присоединить историю ссылки или что-то подобное? Браузеры просто читают результаты поиска Google определенным образом?

Answer 1

Если вы обратите внимание на строку состояния при наведении на ссылку, вы увидите, что она изначально указывает на "чистый" URL.

Только при нажатии на ссылку (с любой из трех кнопок мыши) запускается событие JavaScript, которое изменяет назначение ссылки на перенаправление URL-адреса Google.

Чтобы подтвердить мое утверждение, просто щелкните правой кнопкой мыши любую из фиолетовых ссылок и закройте контекстное меню. Если вы уже не посещали сайт из результатов поиска Google, вы увидите, что он меняет цвета. ¹

Я не знаю точно, как Google внедряет URL перенаправления ², но общая идея такова:

// define a function `f' that changes a link's clean URL to a redirection URL
var f = function () {
    // prepend `http://www.google.com/url?rct=j&url=' to the link's target
    this.href = 'http://www.google.com/url?rct=j&url=' + escape(this.href);
    // don't invoke this function anymore when clicking the link
    this.removeEventListener('click', f);
    // don't invoke this function anymore when right-clicking the link
    this.removeEventListener('contextmenu', f);
}

// save all <a> tags in an array `a'
var a = document.getElementsByTagName('a');

// for each <a> tag in the array `a'
for (var i = 0; i < a.length; i++) {
    // execute function `f' when clicking the link
    a[i].addEventListener('click', f);
    // execute function `f' when right-clicking the link
    a[i].addEventListener('contextmenu', f);
}

Вы можете попробовать этот jsFiddle, чтобы увидеть, как он работает.

---

_{¹ Протестировано на Chromium 25 (Ubuntu 12.10) и Chrome 26 (Windows 7)}

_{² Минимизированный JavaScript-код немного сложен для чтения.}