Facebook 和 Twitter 小部件在导航中消失 (Rails)答案

【问题标题】：Facebook and Twitter widgets disappear on navigation (Rails)Facebook 和 Twitter 小部件在导航中消失 (Rails)
【发布时间】：2014-01-18 04:27:32
【问题描述】：

我有一个fb-like-box 和一个twitter-timeline，这是官方 facebook 页面和 twitter 小部件。然而，在实际导航中（侧边栏中的链接执行 ajax 加载），例如单击徽标时，这两个小部件消失得无影无踪。

刷新页面时，小部件再次按预期显示。

<div id="social_bar">
    <div id="facebook_like_box">
        <div class="fb-like-box" data-href="https://www.facebook.com/Gx.Edg" data-width="234" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
    </div>

    <a class="twitter-timeline" href="https://twitter.com/gxEDGE" data-widget-id="308092518074040321"></a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

【问题讨论】：

标签： ruby-on-rails twitter facebook-likebox turbolinks

【解决方案1】：

根本原因是 Turbolinks 如何与标头脚本交互。 @peteykun 在他的回答中提供了正确的解决方案，尽管它已经过时并且缺乏详细的解释。在撰写本文时，Rails 5 使用 Turbolinks 5。

当您第一次访问 Rails 网站上的页面（或刷新页面）时，该页面会正常获取，不会受到 Turbolinks 的干扰。预期的浏览器事件触发，JavaScript 执行，一切都正确呈现。当您从该页面导航到同一域上的另一个页面（即单击链接）时，问题就开始了。发生这种情况时，Turbolinks intercepts the new page request 会发出稍微不同的请求，但速度会更快。忽略细节，最终结果是预期的浏览器事件不会像通常那样触发。没有事件，没有 JavaScript。没有 JavaScript，没有渲染。根据Turbolinks GitHub：

您可能习惯于安装 JavaScript 行为以响应 window.onload、DOMContentLoaded 或 jQuery 就绪事件。和 Turbolinks，这些事件只会在响应初始页面加载——不是在任何后续页面更改之后。

最好和最简单的解决方案是监听 Turbolink 的事件，而不是标准的浏览器事件。

幸运的是，user @reed of GitHub 编写了一个 website，它致力于重写各种常用的 JavaScript 以与 Turbolinks 兼容。不幸的是，目前网站上的解决方案是为早期版本的 Turbolinks 编写的，不能开箱即用。假设他们尚未更新网站，您需要进行一些更改。

首先，将page:* 形式的所有事件绑定更改为turbolinks:*。 Turbolinks 5 中的event namespaces were changed。这是使@reed 的Twitter 咖啡脚本（解决方案#2）工作所需的唯一更改。至于 Facebook 咖啡脚本，没有 turbolinks:fetch 或 turbolinks:change 事件之类的东西，但这没关系。继续阅读以获得更优雅的解决方案。

Reed 的 Facebook 咖啡脚本使用 Javascript 将 #fb-root 元素从旧页面的正文转移到新页面。据我了解，这样做是为了保留 Facebook 功能。 Turbolinks 5 有一个新功能，允许您将页面元素标记为permanent。用户@pomartel 提到了这个here，我相信这是一个更优雅的解决方案。只需将data-turbolinks-permanent 属性添加到#fb-root div，我们就不再需要saveFacebookRoot 和restoreFacebookRoot 函数。

完整的 Facebook 解决方案如下。在<body>：

<body>
  <div id="fb-root" data-turbolinks-permanent></div>

在<head>：

<%= javascript_include_tag 'facebook_sdk', 'data-turbolinks-track': 'reload' %>

还有属于./app/assets/javascripts的facebook_sdk.coffee文件：

$ ->
  loadFacebookSDK()
  bindFacebookEvents() unless window.fbEventsBound

bindFacebookEvents = ->
  $(document)
    .on('turbolinks:load', ->
      FB?.XFBML.parse()
    )
  @fbEventsBound = true

loadFacebookSDK = ->
  window.fbAsyncInit = initializeFacebookSDK
  $.getScript("//connect.facebook.net/en_US/sdk.js")

initializeFacebookSDK = ->
  FB.init
    appId  : 'YOUR-APP-ID-HERE'
    status : true
    cookie : true
    xfbml  : true
    autoLogAppEvents : true
    version: 'v2.11'

不要忘记将 Facebook 和 Twitter 咖啡脚本添加到 precompiled asset pipeline！

【讨论】：

【解决方案2】：

问题在于默认捆绑的 ruby gem，称为 Turbolinks。

解决方案可在 Turbolinks 兼容性项目中找到：

【讨论】：