时间戳

首页 > 解决方案 > Rails 6 与 Turbolinks 和 Facebook 客户聊天

ruby-on-rails - Rails 6 与 Turbolinks 和 Facebook 客户聊天

问题描述

我有这个来自 facebook 的代码

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
  FB.init({
    xfbml            : true,
    version          : 'v10.0'
  });
};

(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 = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your Chat Plugin code -->
<div class="fb-customerchat"
  attribution="install_email"
  page_id="My_page_id"
  theme_color="#4A50E1">
</div>

它从一开始就有效，但如果我移动到另一个页面（使用 turbolinks），那么 Facebook 聊天就会消失。我尝试了Turbolinks 5.0 和 Facebook SDK的解决方案，但在这种情况下，Facebook 聊天会一遍又一遍地产生。有任何想法吗？

标签： ruby-on-railsfacebookfacebook-javascript-sdkturbolinks

解决方案

index.html：（替换“ID”）

<div id="fb-root" data-turbolinks-permanent></div>
<div id="fb-customer-chat" data-turbolinks-permanent class="fb-customerchat" page_id="<ID>" attribution="biz_inbox"></div>

<script type="text/javascript">
  window.fbAsyncInit = function() {
    FB.init({
      xfbml: true,
      version: 'v11.0'
    });
  };

  (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 = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

应用程序.js：

let fbRoot;

function saveFacebookRoot() {
  const temp = document.querySelector("#fb-root");
  if (temp) {
    temp.querySelector("[data-turbolinks-no-cache]")?.remove();
    fbRoot = temp;
    temp.remove();
  }
}

function restoreFacebookRoot() {
  if (fbRoot != null) {
    const temp = document.querySelector("#fb-root");
    if (temp) {
      temp.replaceWith(fbRoot);
    } else {
      document.querySelector("body").append(fbRoot)
    }
  }
}

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

基础资源https://github.com/turbolinks/turbolinks/issues/596

推荐阅读