如何使 AddThis 与 Rails 4 turbo-links 一起使用？答案

【问题标题】：How to make AddThis to work with Rails 4 turbo-links?如何使 AddThis 与 Rails 4 turbo-links 一起使用？
【发布时间】：2014-02-13 20:39:33
【问题描述】：

我正在尝试在我的 Rails 网站上设置 AddThis 插件，但目前只取得了部分成功。问题是它不能像涡轮链接那样工作。 AddThis 分享按钮仅在页面刷新后出现。如果我单击站点的其他部分，AddThis 工具栏就会消失。如果我禁用 turbo-links，那么它将在网站的每个部分都有效。

这是我生成智能层时得到的代码：

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xxx"></script>
<script type="text/javascript">
  addthis.layers({
    'theme' : 'transparent',
    'share' : {
      'position' : 'left',
      'numPreferredServices' : 5
    }   
  });
</script>
<!-- AddThis Smart Layers END -->

该代码当然不适用于 turbo-links。我找到了这个解决方案'how to make add this work with turbilinks rails 4，作者确认它有效，但是当我点击网站的其他部分时我仍然遇到问题。

我尝试将此代码插入到我的application.html.erb 文件中的head 标记中：

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript">$(document).ready(function() {

    var script="//s7.addthis.com/js/300/addthis_widget.js#pubid=xxx";

    if (window.addthis){
        window.addthis = null;
        window._adr = null;
        window._atc = null;
        window._atd = null;
        window._ate = null;
        window._atr = null;
        window._atw = null;
    }
    $.getScript(script, function(){
        addthis.layers({
            'theme' : 'transparent',
            'share' : {
              'position' : 'left',
              'numPreferredServices' : 5
            }   
        });
    });
});
</script>
<!-- AddThis Smart Layers END -->

AddThis 在我打开我的网站后通常会再次加载，但一旦我切换到网站的其他部分，AddThis 就会消失。

如何使该脚本在启用 turbo 链接的情况下在我网站的每个部分上运行？

编辑 1：

也试过了，但没有成功：

<script type="text/javascript">

    $(document).on('page:change', function() {
      // Remove all global properties set by addthis, otherwise it won't reinitialize
      for (var i in window) {
        if (/^addthis/.test(i) || /^_at/.test(i)) {
          delete window[i];
        }
      }
      window.addthis_share = null;

      // Finally, load addthis
      $.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx");
    });
</script>

【问题讨论】：

标签： javascript ruby-on-rails addthis turbolinks

【解决方案1】：

你试过了吗：

#app/assets/javascripts/application.js
addthis = function() {

      // Remove all global properties set by addthis, otherwise it won't reinitialize
      for (var i in window) {
        if (/^addthis/.test(i) || /^_at/.test(i)) {
          delete window[i];
        }
      }
      window.addthis_share = null;

      // Finally, load addthis
      $.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx");
}

$(document).ready(addthis);
$(document).on('page:load', addthis);
$(document).on('page:change', addthis);

【讨论】：

我做了一点改动，将 .done 添加到 getScript 以加载 addthis.layers 调用并配置小部件。
我得到 Uncaught ReferenceError: addthis is not defined on my staging server when I put it in my application.js file
这对我不起作用，将发布，getScript 不起作用，而放置脚本标签则起作用

【解决方案2】：

此解决方案不需要事件处理程序。

首先，我在app/views/layouts/_add_this.html.erb 上创建了一个部分：

<script type="text/javascript">
  if (window.addthis) {
    window.addthis = null;
    window._adr = null;
    window._atc = null;
    window._atd = null;
    window._ate = null;
    window._atr = null;
    window._atw = null;
  }
</script>
<script src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=XXXXXXXXX" type="text/javascript"></script>

然后，每当我需要添加这个时，我都会使用：

<%= render 'layouts/add_this' %>

由于某种原因，getScript 对我不起作用。

【讨论】：

【解决方案3】：

这是唯一对我有用的东西：

调用 addthis 时这样做：

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<YOUR PUB ID HERE>"></script>
        <!-- Go to www.addthis.com/dashboard to customize your tools -->
        <div class="addthis_sharing_toolbox"></div>

确保在您的 application.js 文件中的 turbolinks 和 jQuery 之后包含此文件：

addthis.js

//fixes social addthis links
var addthis;
addthis = function() {
    var script = 'http://s7.addthis.com/js/300/addthis_widget.js#pubid=<YOUR PUB ID HERE>#async=1';
      // Remove all global properties set by addthis, otherwise it won't reinitialize
      for (var i in window) {
        if (/^addthis/.test(i) || /^_at/.test(i)) {
          delete window[i];
        }
      }
      window.addthis_share = null;

      // Remove all global properties set by addthis, otherwise it won't reinitialize
      if(window.addthis) {
           window.addthis = null;
            window._adr = null;
            window._atc = null;
            window._atd = null;
            window._ate = null;
            window._atr = null;
            window._atw = null;
      }

      // Finally, load addthis
      $.getScript(script, function(){
        addthis.toolbox('.addthis_toolbox');
      });
}

$(document).ready(addthis);
$(document).on('page:load', addthis);
$(document).on('page:change', addthis);

【讨论】：

为什么你删除然后设置为null？

【解决方案4】：

移除 addthis js 的 turbolinks 效果。您可以使用jquery-turbolinks gem。您只需按照指南安装 gem，然后像这样放入 application.js jquery-turbolinks：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

在此之后，Turbolinks 将非常适合页面加载，但允许我们的 js 和 jquery 在 turbolinks 生效之前加载。

您可以通过blog post 来查看此 gem 的使用详情。

【讨论】：