我在博客文章页面上实现了 FB 评论和 FB 分享按钮。当我第一次访问我的博客文章页面时，FB 评论很少加载。当我刷新页面时，会发生以下五件事之一:1)页面加载时没有注释(大多数情况下)； 2)页面加载评论； 3)出现FB未定义；有时我会得到 4) init not call with valid version 。如果我快速刷新两次，有时页面根本不会刷新，只会返回一个空白页面。为了寻找这个解决方案，我几乎查看了与本次演讲相关的所有有关堆栈溢出的帖子，包括: facebook comments plugin showing only after refresh
我不知道 Turbolink 是什么，但我认为它与 RoR 有关，这是一个 Angular Fullstack 项目。在我的index.html中:
<body ng-app="theApp">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MyApp',
xfbml : true,
version : 'v2.5'
});
};
(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.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
关于我的comments.html:
<div class="fb-comments" data-href={{webAddress}} data-width="100%" data-numposts="10"></div>
关于我的comments.controller:
angular.element(document).ready(function() {
FB.XFBML.parse();
});
此解决方案使我的 FB 共享按钮无需刷新即可出现(我最近的问题)，但它让我在额外刷新之前不会出现我的评论。
最佳答案
经过多次实验，我终于在第一页加载时出现了评论。有一个滞后问题，如果我转到另一个页面(例如我们的社交媒体)然后快速按退格键，它会显示“FB 未定义”。任何留下更好答案的人都会获得奖励积分。这是我发现第一次加载页面的代码:
我的index.html:
<body ng-app="theApp">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MyApp',
xfbml : false, //this was true before,
version : 'v2.5'
});
};
(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.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
我的评论.html:
<script>
FB.XFBML.parse();
</script>
<div class="fb-comments" data-href={{webAddress}} data-width="100%" data-numposts="10"></div>
我的comments.controller.js:
angular.element(document).ready(function() {
FB.XFBML.parse();
});
我很高兴它“有效”，但考虑到 comments.html 和 comments.controller.js 中 FB.XFBML.parse() 的冗余，以及当您转到另一个页面后返回时页面会崩溃的事实页面太快我发现自己不满意。如果有人有更好的答案，我很乐意听到。
关于javascript - Facebook 评论加载与 Angular Fullstack 不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36187606/