如何在运行时动态修改Facebook Customer Chat Plugin的page_id？

我之前也踩过这个坑！你遇到的不稳定问题，核心原因是Facebook Customer Chat Plugin的JS SDK只会在初始化阶段扫描一次DOM中的.fb-customerchat元素，把它替换成聊天所需的iframe和气泡组件。如果你的动态创建逻辑执行时机晚于SDK的首次扫描，新添加的div就会被忽略，导致聊天气泡点击无反应、原div留在DOM里的情况。

先搞懂SDK的处理机制 #

当Facebook SDK加载完成后（也就是fbAsyncInit触发时），会立即执行以下操作：

1. 扫描DOM中所有带fb-customerchat类名的元素
2. 移除原div元素，插入Facebook官方的聊天气泡容器和iframe
3. 绑定点击事件、初始化聊天会话逻辑

本地测试偶尔能用，是因为动态创建div的时机刚好赶在SDK加载完成之前；服务器环境下SDK加载更快，你的代码执行时扫描已经完成，自然不会处理新元素。

解决方案 #

针对Angular 1.5的场景，推荐两种可靠的实现方式：

1. 手动触发SDK重新解析DOM #

在动态创建div后，调用FB.XFBML.parse()方法，让SDK重新扫描并处理新添加的元素。

// 建议放在Angular组件的$postLink或$onInit钩子中
function initFbChat(page_id) {
  // 先移除旧的聊天元素（避免重复创建）
  const oldChatDiv = document.querySelector('.fb-customerchat');
  if (oldChatDiv) {
    oldChatDiv.remove();
  }

  // 动态创建新的聊天元素
  let fbChatDiv = document.createElement('div');
  fbChatDiv.className = 'fb-customerchat';
  fbChatDiv.setAttribute('page_id', page_id);
  fbChatDiv.setAttribute('ref', '');
  document.body.appendChild(fbChatDiv);

  // 确保SDK加载完成后触发解析
  if (typeof FB !== 'undefined') {
    FB.XFBML.parse();
  } else {
    // 如果SDK还未加载，挂载到fbAsyncInit事件
    window.fbAsyncInit = function() {
      FB.XFBML.parse();
    };
  }
}

2. 封装Angular指令（更符合框架风格） #

如果需要频繁切换page_id，封装成自定义指令会更优雅，还能自动监听page_id变化：

angular.module('yourApp').directive('fbCustomerChat', function() {
  return {
    scope: {
      pageId: '@'
    },
    link: function(scope, element) {
      // 初始化聊天组件的方法
      function renderChat(pageId) {
        element.empty();
        const chatDiv = document.createElement('div');
        chatDiv.className = 'fb-customerchat';
        chatDiv.setAttribute('page_id', pageId);
        chatDiv.setAttribute('ref', '');
        element.append(chatDiv);

        // 触发SDK解析
        if (typeof FB !== 'undefined') {
          FB.XFBML.parse(element[0]);
        }
      }

      // 监听SDK加载完成
      if (typeof FB === 'undefined') {
        window.fbAsyncInit = function() {
          renderChat(scope.pageId);
        };
      } else {
        renderChat(scope.pageId);
      }

      // 监听pageId变化，自动更新聊天组件
      scope.$watch('pageId', function(newPageId) {
        if (newPageId) {
          renderChat(newPageId);
        }
      });
    }
  };
});

然后在模板中直接使用：

<fb-customer-chat page-id="{{currentPageId}}"></fb-customer-chat>

关键注意事项 #

• 确保你的Facebook SDK加载脚本中开启了xfbml: true配置（Customer Chat属于XFBML元素，必须启用）：

  <script>
    window.fbAsyncInit = function() {
      FB.init({
        xfbml: true,
        version: 'v18.0' // 使用最新的SDK版本号
      });
    };
  
    (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>
  

• 服务器环境下，避免在页面加载初期就执行动态创建逻辑，最好放在用户交互触发的回调或组件生命周期的后期，确保SDK已经加载完成。
• 切换page_id时，一定要先移除旧的聊天元素，再创建新的，避免DOM中存在多个.fb-customerchat元素导致冲突。

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