1

我们的网络代码中有一个 facebook 评论插件，我们希望实时更新评论部分。

为此，我们使用 FB.XFBML.parse() 例程来解析 FB DOM。然而，当我们这样做时，我们会看到一个巨大的闪烁，因为 fb-comments DOM 被删除并再次添加。

有什么方法可以自动刷新评论部分而不会闪烁？

这是我们的代码

<!doctype html>
<html lang="en">
<head>
</head>
<body>

<div id="social" style="width:550px;height:100px">


<script>(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/all.js#xfbml=1&version=v2.6"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'))
</script>

<div id = parent>
<div id ="mycomments" class="fb-comments" data-href="http://www.example.com/#/home" data-order-by=reverse_time>
</div>
</div>

<script>

function removeElement(elementId) {
try{
    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
  } catch (e){

  }
}

function addElement() {
    try{
      const div = document.createElement('div');
       div.innerHTML = `<div id ="mycomments" class="fb-comments" data-href="http://www.example.com/#/home" data-order-by=reverse_time/>`;

      document.getElementById('parent').appendChild(div);
    } catch (e){
        console.error(e);
    }
}
setInterval(function(){
    removeElement("mycomments");
    addElement();
    FB.XFBML.parse();
    console.log("added again");
}, 5000)
</script>
</div>
</body>
</html>

任何指针都会有很大帮助。谢谢。

4

0 回答 0