Rails，如何创建“google like”（网址预览）link_to答案

【问题标题】：Rails, How to create "google like"(URL preview) link_toRails，如何创建“google like”（网址预览）link_to
【发布时间】：2011-10-27 12:55:52
【问题描述】：

我想在 Rails 中创建 link_to“google like”。

让我解释一下。

在简单的谷歌搜索页面上 http://www.google.com/search?hl=en&source=hp&biw=1280&bih=658&q=stackoverflow&oq=stackoverflow&aq=f&aqi=g10&aql=1&gs_sm=e&gs_upl=65l2231l0l2364l13l13l0l5l5l1l297l1698l1.2.5l8l0

对于简单的用户来说，一切看起来都很漂亮。

网址预览为stackoverflow.com

但是当我点击copy link location时，我得到了这个地址http://www.google.com/url?sa=t&rct=j&q=stackoverflow&source=web&cd=1&ved=0CC8QFjAA&url=http%3A%2F%2Fstackoverflow.com%2F&ei=JVOpTra5M-Pi4QT1pPwk&usg=AFQjCNERidL9Hb6OvGW93_Y6MRj3aTdMVA&sig2=_ARyobDs5AzfZw4YwBNg1g

如何在 Rails 中使用 JS 或 Coffescript 控制 link_to 的 URL 预览？有人可以为这个问题提供一些解决方案吗？

【问题讨论】：

标签： javascript ruby-on-rails coffeescript link-to

【解决方案1】：

原始链接引用是“漂亮版本”，但 mousedown 事件更改 URL 以使用 JavaScript 通过 Google 网站重定向。

原始 HTML：

<a class="l" onmousedown="return rwt(this,'','','','1','AFQjCNERidL9Hb6OvGW93_Y6MRj3aTdMVA','','0CDAQFjAA')" href="http://stackoverflow.com/">

堆栈溢出

在 mousedown 事件之后（甚至是右键单击）：

<a class="l" onmousedown="return rwt(this,'','','','1','AFQjCNERidL9Hb6OvGW93_Y6MRj3aTdMVA','','0CDAQFjAA')" href="http://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CDAQFjAA&url=http%3A%2F%2Fstackoverflow.com%2F&ei=aVepTtjwJ4nlsQKTvLHbBQ&usg=AFQjCNERidL9Hb6OvGW93_Y6MRj3aTdMVA">

堆栈溢出

基于 ERB 模板的未经测试的 JQuery 实现：

$('.l').mousedown(function() {
  $(this).attr("href","<%= url_for(:controller => :redirect, :action => :index) -%>/"+$(this).attr("href"));
});

【讨论】：

【解决方案2】：

原始解决方案，但方向正确？

<%= link_to "Test", "Pretty.url", :onmousedown => "window.location.href = 'UGLY.URL'; return false;" %>

【讨论】：

我认为即使右键单击也会重定向到新位置，但这种实现方式也可以。它确实需要像这样专门引用每个链接。使用帮助器使其更容易是有益的，但是通过为每个链接重复 JS 而不是绑定到它们的类，会向客户端发送更多数据。
你可以给它一个类并为该类设置一个jQuery规则，丑陋的url保存在一个自定义属性中（例如data-ugly）