Блог

Главная - Вопросы по программированию - Как изменить ссылку при нажатии / копировании, например, в чате Facebook Messenger?

Как изменить ссылку при нажатии / копировании, например, в чате Facebook Messenger?

#javascript #facebook #click #copy #href

#javascript #Facebook #нажмите #Копировать #href

Вопрос:

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

Ссылка, на которую они меняются, выглядит примерно так: http://www.facebook.com/l.php?u=http://store.steampowered.com%2

(эта оригинальная ссылка здесь является http://store.steampowered.com / например)

Однако при предварительном просмотре ссылки при наведении на нее курсора мыши отображается исходная ссылка.

Как это возможно?

Ответ №1:

Причиной этого, конечно, является отслеживание исходящих кликов. Решение простое и довольно хитрое. Лично я считаю, что это несколько сомнительно с моральной точки зрения. Предварительный просмотр ссылки при наведении курсора мыши действительно показывает исходную ссылку, поэтому вы можете с радостью скопировать ссылку, думая, что можете вставить ее в другое место и получить оригинал, но вместо этого вы получаете версию для Facebook.

Возможно, это то, что браузеры не должны допускать?

В любом случае это решается с помощью простого JavaScript.

Для части щелчка:

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

Перед завершением прослушивания события вы устанавливаете функцию тайм-аута с разумным значением — Facebook использует 100 мс. При этом ссылка сбрасывается на оригинал.

Для части копирования

Здесь вы прослушиваете событие наведения курсора мыши и проверяете, что event.button == 2 (правая кнопка мыши). При срабатывании поменяйте ссылку, как указано выше, но не устанавливайте тайм-аут.

Вместо этого вы прослушиваете mouseout, и в этом случае вы сбрасываете ссылку обратно к исходному значению.

В коде с использованием jQuery предполагается HTML с тегом привязки:

 var anchor = $('a');
var sneakyLink = 'http://www.altavista.com';
var prevLink = anchor[0].href;

anchor.on('click',function(e){
    anchor[0].href = sneakyLink;
    setTimeout(function(){
        anchor[0].href=prevLink;
    },100);
    return true;
});

anchor.on('mousedown',function(e){
    if(e.button == 2) {        
        anchor[0].href = sneakyLink;
    }    
});

anchor.on('mouseout',function(e){
    anchor[0].href = prevLink;
});

Демонстрация JSFiddle с тем же кодом: http://jsfiddle.net/657FN/1 /

Метки: