Ruby on rails Facebook和Twitter小部件在导航（Rails）上消失_Ruby On Rails_Twitter_Facebook Likebox_Turbolinks

Ruby on rails Facebook和Twitter小部件在导航（Rails）上消失

ruby-on-rails twitter

Ruby on rails Facebook和Twitter小部件在导航（Rails）上消失,ruby-on-rails,twitter,facebook-likebox,turbolinks,Ruby On Rails,Twitter,Facebook Likebox,Turbolinks,我有一个类似fb的框和一个推特时间线、facebook官方页面和推特小部件。然而，在实际的导航中（侧边栏中的链接进行ajax加载），例如在单击徽标时，这两个小部件消失在空气中刷新页面时，小部件再次按预期显示 <div id="social_bar"> <div id="facebook_like_box"> <div class="fb-like-box" data-href="https://www.facebook.com/Gx.Edg

我有一个类似fb的

框

和一个

推特时间线

、facebook官方页面和推特小部件。然而，在实际的导航中（侧边栏中的链接进行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>


!函数（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）；}（文档，“脚本”，“twitter wjs”）；

问题在于默认情况下捆绑的ruby gem，称为TurboLink

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

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

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

您可能习惯于安装JavaScript行为以响应 window.onload、DOMContentLoaded或jQuery就绪事件。具有 TurboLink，这些事件将仅在响应初始页面加载不在任何后续页面更改之后进行

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

幸运的是，有一个作者致力于重写各种常用的Java脚本以与TurboLink兼容。不幸的是，目前网站上的解决方案是为Turbolinks的早期版本编写的，无法开箱即用。假设他们还没有更新网站，你需要做一些更改

首先，将表单

page:

的所有事件绑定更改为

turbolinks:

。Turbolinks 5中的。这是使@reed的Twitter咖啡脚本（解决方案2）生效所需的唯一更改。至于Facebook的coffeescript，没有所谓的

turbolinks:fetch

或

turbolinks:change

事件，但这没关系。请继续阅读，以获得更优雅的解决方案

里德的Facebook咖啡脚本使用Javascript将

#fb root

元素从旧页面主体转移到新页面。据我所知，这样做是为了保留Facebook的功能。Turbolinks 5有一个新功能，允许您将页面元素标记为。User@pomartel提到了这一点，我相信这是一个更加优雅的解决方案。只需将

data turbolinks permanent

属性添加到

#fb root

div，我们就不需要使用

saveFacebookRoot

和

restoreFacebookRoot

函数

下面是完整的Facebook解决方案。在

中：

别忘了将Facebook和Twitter咖啡脚本添加到页面中

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

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

$ ->
  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'