0 
<script type="text/javascript">
$(document).ready(function(){
    $(".trigger").click(function(){
        $(".shoutpanel").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});
</script>

<a class="trigger" href="#">Shoutbox</a>


<div class="shoutpanel">
<iframe id="shoutbox" name="shoutbox" width="350" height="480" src="tchat.php">
</iframe>
</div>

このスクリプトは、シャウト ボックスを含むスライド パネルを切り替えます。シャウトボックスをスライドパネルの外に置くと、読み込まれるとすぐに自動的に下にスクロールします（最後のシャウトを表示するため）しかし、なんらかの理由でシャウトボックスをスライドパネルの中に置くと、下にスクロールしません手動で更新しない限り。

だから私は回避策を見つけようとしていて、実行時にシャウトボックスのiframeを自動的に更新するようにトリガースクリプトを設定することを考えました。トリガーをクリックすると、スライドパネルを開いた後にシャウトボックスが更新されます

私はjqueryのプロではないので、自分でそれを行うことができませんでした...基本的には、次のようなものが必要です:

$(document).ready(function(){
$(".trigger").click(function(){
    $(".shoutpanel").toggle("fast");
    $(this).toggleClass("active");
    return false;
            document.getElementById(shoutbox).contentDocument.location.reload(true);
});
});
4

1 に答える 1

1

いくつかの問題:

  • クリックイベントに return false があり (これは必須ではありません)、reload ステートメントの前にもあります。したがって、実行されることはありません。
  • document.getElementById(shoutbox) には、id を引用符で囲む必要があります。
  • これにより、slideUp 中でも常に iframe をリロードします。

これを試して：

$(document).ready(function () {
    $(".trigger").click(function () {
        $(".shoutpanel").toggle("fast", function () { //Use toggle's complete function 
            if ($(this).is(':visible')) {   // check if this is in visible mode
              document.getElementById("shoutbox")
                    .contentDocument.location.reload(true); //reload the iframe
            }
        });
        $(this).toggleClass("active");

    });
});

フィドル

于 2013-06-13T20:14:56.677 に答える