如何使AddThis与Rails4涡轮链接一起工作

Question

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

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

<!-- 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 -->

这个代码当然不适用于涡轮链接。我找到了这个解决方案"如何使用turbinlinks 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>

Answer 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);

Answer 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对我不起作用。

Answer 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>

请确保在您的应用程序.js文件中的turbulinks和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);

Answer 4

删除addthis js的涡轮链接效果。您可以使用jquery涡轮链接gem。您只需要按照指南安装gem，然后将其放入application.js jquery涡轮链接中，如下所示：

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

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

你可以通过这篇博客文章来了解这个gem的使用细节。