Javascript Facebook共享按钮未加载Rails TurboLink

我按照Facebook的一般指南加入了共享按钮（社交插件）

_social.html.erb

<div id="fb-root"><div class="fb-share-button" data-href="http://www.example.com" data-layout="button_count"></div></div>

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require_tree .

该按钮在第一页加载时呈现，也可以正常工作。但在导航到下一页并返回时不会呈现

---

如果我在application.js文件中包含fb_share.js文件（在turbolinks之前），它根本不会显示。

Facebook js SDK只在初始化时浏览HTML文档一次，以查找要替换为fb社交插件的元素

再次尝试嵌入JS SDK，就像您试图调用

fb_share

一样，是没有用的——因为如果已经嵌入了JS SDK，那么该代码是专门编写的，不会再次嵌入JS SDK

---

让SDK再次解析文档以获取稍后添加的内容的正确方法是调用。

对于Turbolinks 5，这是唯一对我有效的方法：

---

对于TurboLinks 5，这对我很有用

有必要向fb根元素添加

data turbolinks permanent

<div id="fb-root" data-turbolinks-permanent></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

document.addEventListener("turbolinks:load", function() {
  if(window.FB) {
    FB.XFBML.parse();
  }
});
</script>

（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/de#de/sdk.js#xfbml=1&version=v2.9”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
document.addEventListener（“TurboLink:load”，函数（）{
如果（window.FB）{
FB.XFBML.parse（）；
}
});

解决了我的问题+谢谢！用

data turbolinks permanent

注释

fb root

元素，使元素永久化，而

xfbmlpasse的
EventListener
对我有效。这里有一些关于“跨页面加载持久化元素”的文档
// FacebookSDK
// https://developers.facebook.com/docs/plugins/page-plugin/
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s);
  js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')); // Replace 'facebook-jssdk' with your page id.

// Compatibility with Turbolinks 5
(function($) {
  var fbRoot;

  function saveFacebookRoot() {
    if ($('#fb-root').length) {
      fbRoot = $('#fb-root').detach();
    }
  };

  function restoreFacebookRoot() {
    if (fbRoot != null) {
      if ($('#fb-root').length) {
        $('#fb-root').replaceWith(fbRoot);
      } else {
        $('body').append(fbRoot);
      }
    }

    if (typeof FB !== "undefined" && FB !== null) { // Instance of FacebookSDK
      FB.XFBML.parse();
    }
  };

  document.addEventListener('turbolinks:request-start', saveFacebookRoot)
  document.addEventListener('turbolinks:load', restoreFacebookRoot)
}(jQuery));

<div id="fb-root" data-turbolinks-permanent></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

document.addEventListener("turbolinks:load", function() {
  if(window.FB) {
    FB.XFBML.parse();
  }
});
</script>