Javascript Facebook messenger复选框插件未呈现

我正在尝试在我的AngularJS应用程序中实现Facebook Messenger复选框插件。我遵循这个指南

我设法使它工作起来。我导航到该页面并显示我的messenger复选框插件，但当我导航到另一个页面，然后返回到包含Facebook复选框messenger插件的页面时，该页面不会呈现，并且我没有从Facebook登录任何内容

这是我对FB的初始化过程

$window.fbAsyncInit = function () {
    FB.init({
      appId: 'MY_FACEBOOK_APP_ID',
      xfbml: true,
      version: 'v2.8'
    });
};
(function (d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   var fbElement = d.getElementById(id);
   if (fbElement) {
     return;
   }
   js = d.createElement(s);
   js.id = id;
   js.src = '//connect.facebook.net/en_US/sdk.js';
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

这是我对facebook messenger复选框插件的指示

<div 
    class="fb-messenger-checkbox"
    origin="{{origin}}"
    page_id="{{pageId}}"
    messenger_app_id="{{messengerAppId}}"
    user_ref="{{userRef}}"
    prechecked="true"
    allow_login="true"
    size="xlarge">
</div>

就像我说的，当我第一次导航到页面时，一切都正常（然后呈现Facebook复选框Messenger插件）。之后，当我导航到另一个页面并返回时，插件不再显示。没有任何错误，而且我每次都会重新计算user_ref参数，使其成为随机字符串

在我看来，当一次调用FB.init之后，当我导航回该页面（即使我不再调用FB.init）时，似乎出现了问题

---

有人知道会有什么问题吗？

首先，你需要向fb列出/注册你的域。

确保每次页面呈现时都生成唯一的用户\u ref。如果给出了相同的用户\u ref，则复选框将不会呈现我遇到了相同的问题，您需要在javascript代码中使用：

FB.XFBML.parse（document.getElementById（'FB-messenger_复选框'）（如果您像我一样使用角度easyFb，请使用ezfb而不是FB）

当你在应用程序上时，你也可以在控制台中尝试，如果你在其他方面都做得正确，它也会呈现插件：


将你的域名列入白名单
随机化用户引用（例如
$scope.userRef=Math.floor（（Math.random（）*100000000000）+1）；
）

PS：如果您使用的是angular easyfb，则不需要加载任何$window.fbAsyninit，ezfb为您执行此操作
请务必检查所有这些疑难解答提示

验证您的bot是否已被批准具有pages\u messaging权限
验证您的页面是否具有对bot的webhook订阅
如果您看到控制台错误，如“由于祖先违反以下内容安全策略指令而拒绝在帧中显示：*”，请检查正在呈现插件的页面的域是否已被列入白名单
如果allow_login参数设置为false，则您需要有一个有效的Facebook用户会话（即未登录），否则插件将被隐藏
这些来自Facebook

请特别注意第2个问题：验证您的页面是否已订阅了bot的webhook。您可以使用此页面了解如何将页面订阅到bot
 尝试以下步骤：

将
移动到索引页面，因为当加载Facebook sdk时，他会向fb根添加一些逻辑
在带有插件的页面响应的控制器中，将此代码添加到$onInit方法：

如果（window.FB）{
window.FB.XFBML.parse（）；
}
因此，问题是当你转到另一个页面时，带有一些逻辑的fb root被破坏，fb.XFBML不再工作。
是的，我将该域列入了白名单。我认为facebook应用程序设置还可以，因为正如我所说的facebook messenger复选框插件实际上正在工作，但这只是我第一次导航到包含它的页面。当我第二次/第三次/etc浏览时，它只是呈现我提供的html，但似乎没有触发facebook脚本，并且它没有呈现我提供的html中的iframe。它是否公开？URL是什么？为什么要随机化用户引用？这会不会导致FB插件无法呈现？是的，没错。正如文档中所说，每次你想要呈现插件时，你都需要有一个不同的用户\u ref。这就是为什么你应该随机化这个变量。