Turbolinks Classic：Facebook视频API嵌入事件触发后页面导航时的变量泄漏问题

嘿，我之前刚好碰到过Turbolinks Classic和Facebook SDK搭配的坑，你的问题本质是Turbolinks的页面不刷新机制搞砸了Facebook SDK的事件绑定和初始化逻辑——毕竟移除Turbolinks就好，说明核心冲突就在这儿。下面给你一套简洁优雅的解决思路：

1. 绑定SDK初始化到Turbolinks加载事件 #

Turbolinks不会每次跳转都刷新整个页面，所以第一次加载时运行的SDK初始化代码，在后续跳转后不会自动执行。我们可以把初始化逻辑绑定到turbolinks:load事件，这个事件会在首次加载和每次Turbolinks跳转后触发：

document.addEventListener('turbolinks:load', function() {
  // 优先复用已加载的SDK，避免重复请求
  if (window.FB) {
    setupFacebookVideoListeners();
  } else {
    // 未加载SDK时，先加载再初始化
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '你的APP_ID', // 替换成你的Facebook应用ID
        xfbml      : true,
        version    : 'v18.0' // 用最新的SDK版本号
      });
      setupFacebookVideoListeners();
    };

    // 避免重复插入SDK脚本
    if (!document.getElementById('facebook-jssdk')) {
      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         js = d.createElement(s); js.id = id;
         js.src = "https://connect.facebook.net/en_US/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    }
  }
});

2. 封装视频事件监听逻辑 #

单独写一个函数处理视频的事件绑定，同时注意清理旧的监听，防止重复触发：

function setupFacebookVideoListeners() {
  const videoContainers = document.querySelectorAll('.fb-video');
  
  videoContainers.forEach(videoEl => {
    // 先解绑旧事件，避免重复监听
    FB.Event.unsubscribe('xfbml.render', handleVideoReady);
    FB.Event.unsubscribe('video.play', handleVideoPlay);

    // 监听视频渲染完成事件
    FB.Event.subscribe('xfbml.render', handleVideoReady);
    
    function handleVideoReady() {
      // 绑定视频播放事件
      FB.Event.subscribe('video.play', function(e) {
        // 这里替换成你的业务逻辑：隐藏加载动画，显示视频
        const loader = videoEl.closest('.your-video-wrapper').querySelector('.loading-animation');
        if (loader) {
          loader.style.display = 'none';
          videoEl.style.display = 'block';
        }
      });
    }

    // 手动触发SDK解析，确保新加载的视频元素被识别
    FB.XFBML.parse(videoEl);
  });
}

3. 清理Turbolinks缓存的事件残留 #

Turbolinks会缓存页面，为了避免缓存里的事件干扰下一次页面加载，我们可以在缓存前清理绑定的事件：

document.addEventListener('turbolinks:before-cache', function() {
  if (window.FB) {
    FB.Event.unsubscribe('xfbml.render');
    FB.Event.unsubscribe('video.play');
  }
});

为什么这方案靠谱？ #

• 完全贴合Turbolinks的生命周期，不会做冗余操作
• 兼容首次加载和所有Turbolinks跳转场景
• 清理了缓存残留，避免内存泄漏和重复触发问题

我之前用这套逻辑解决过Turbolinks和YouTube SDK、Facebook评论插件的兼容问题，亲测有效~

内容的提问来源于stack exchange，提问作者Mathieu