0

私は自分のウェブサイトに disqus を使用しており、コメントを表示/非表示にするためのボタンを追加しました。このボタンは、Chrome、Opera (および IE だと思います) では正常に動作しますが、Firefox では失敗します。

ボタンをクリックすると、コメント付きの div が表示されないため、失敗します。div にはサイズがないようです。ウィンドウ ブラウザのサイズを変更すると … \°/ コメントが表示されます ! なんで ？

<p id="commentsButton">
    <button id="buttonComment" onclick="toggleComments()">
        Commentaires</button>  
</p>
<script type="text/javascript">    
    function toggleComments(){
         if (document.getElementById("comments").style.display == "none"){           
            document.getElementById("comments").style.display="inline";
         } else {          
            document.getElementById("comments").style.display="none";
         }
     }  
</script>

disqus ifame にはスタイルがあるようです

style="height: 0px !important

私に何ができる ？ 

4

1 に答える 1

1

Firefox (および一部のバージョンの IE) では、Disqus が非表示の要素に読み込まれると、奇妙な動作が発生します。Disqus 埋め込みコードをtoggleComments()関数内にラップして、その要素が表示されたときに読み込まれるようにすることで、これを修正できます。

disqus_shortnameただし、関数の外など、構成変数は必ず残しておいてください。まとめると、次のようになります。

<script type="text/javascript">    
var disqus_shortname='YOUR_SHORTNAME';

function toggleComments(){
    if (document.getElementById("comments").style.display == "none"){           
        document.getElementById("comments").style.display="inline";

        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        } 
        else {          
            document.getElementById("comments").style.display="none";
        }
    }
}   
</script>
于 2013-10-14T19:55:25.807 に答える