如何在点击/复制时更改链接，如 Facebooks 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/