单击/复制类似Facebook Messenger聊天时如何更改链接？

Question

在Facebook桌面网站上，使用Messenger时，当您单击或复制它们时，它们似乎会更改聊天中的所有传出链接。

他们更改为的链接类似于： http : //www.facebook.com/l.php?u=http%3A%2F%2Fstore.steampowered.com%2

（例如，此原始链接为http://store.steampowered.com/ ）

但是，当通过悬停预览链接时，它会显示原始链接。

这怎么可能？

Answer 1

当然，这样做的原因是为了跟踪传出的点击。 解决方案很简单，而且很偷偷摸摸。 我个人觉得这在道德上有些问题。 悬停时您的链接预览确实显示了原始链接，因此您可以高兴地复制该链接，以为您可以将其粘贴到其他位置并获得原始链接，但可以使用Facebook版本。

也许这是浏览器不应该允许的？

无论如何，这可以通过简单的JavaScript解决。

对于点击部分：

单击时，将链接交换为新链接，并让事件不受阻碍地通过，因此在导航到该链接之前，链接已更改。

在事件的侦听器结束之前，您需要将超时功能设置为合理的值-Facebook使用100毫秒。 这会将链接重置为原始链接。

对于复制部分

在这里，您将侦听mousedown事件并检查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/