1

Web コードに 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