1

jQueryを使用して、たまたまiframeを含むdivを表示/非表示にしています。標準の「表示」および「非表示」メソッドだけでうまく機能します。

だから今、私は少し派手になり、jQuery UI ( http://jqueryui.com/effect/ ) からいくつかの効果を追加したいと思っていますが、突然 iframe を表示/非表示にするたびにリロードされます。

ここに実証するフィドルがあります：http://jsfiddle.net/BnZzk/1/ そして、SOが私にそれを追加することを強制しているので、ここにコードがあります：

<style>
div {
    height: 200px
}
span {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid black;
}
</style>

<div>
    <iframe src="http://www.wikipedia.org/"></iframe>
</div>
<input type="button" value="Go"/>
<hr/>
<div id="msgs"></div>

<script>
$(function () {

var container = $('div'),
    ifrm = $('iframe'),
    msgs = $('#msgs')
    delay = 10; //change me to adjust delay in seconds between actions

$('input').on('click', normal);
log('First let the iframe load and then clear your network console -- click the "Go" button to get started.');

function log (msg) {
    msgs.append('<span>' + msg + '</span>');
}

function normal () {

    ifrm.
        hide(400, function () {

            log('That was a standard hide with no effect -- is your network console still empty? OK we\'ll pause for ' + delay + ' seconds and then do a standard show.');

            ifrm.
                delay(delay * 1000).
                show(400, function () {
                    log('That was a show with no effect -- is you network console *still* empty? Great! Let\'s try some effects.');
                    log('------------------------<br/>' +
                    '-- Begin Effects --<br/>' +
                    '------------------------<br/>');
                    withEffect();
                });

        }); //hide

} //normal

function withEffect () {

    log('We\'ll pause for another ' + delay + ' seconds -- get ready to watch your network console.');

    ifrm.
        delay(delay * 1000).
        hide('fold', {mode:'hide'}, 400, function () {

            log('That was a hide with effect -- is your network console flooded? Mine too :-( We\'ll wait ' + delay + ' seconds while you clear your console again.');

            ifrm.
                delay(delay * 1000).
                show('fold', {mode:'show'}, 400, function () {
                    log('That was a show with effect -- is your network console flooded again? Bummer ...');
                });

        }); //hide

} //withEffect

});
</<script>

派手な効果を維持しながらiframeのコンテンツを更新しない方法はありますか?

4

2 に答える 2

3

これは、この効果が DOM を再編成し、IFRAME の周りに DIV ラッパーを配置するために発生しているため、IFRAME が「再追加」されるとリロードが発生します! この動作は、Google Chrome 要素インスペクターを使用して確認できます。

effect解決するには、プラグインを使用せずに、IFRAME の親 DIV にエフェクトを適用することをお勧めします。http://api.jquery.com/animate/をチェックして、幅と高さのスタイル プロパティを操作してください。

于 2013-02-13T23:08:18.010 に答える
2

@Jamillo Santos の回答として、iFrame の問題を「再追加」します。

ダイアログ ウィジェットまたは jQueryUI の拡張機能を使用していて、この状況を回避したい場合は、以下のようにウィジェット実装の_moveToTop()関数を再定義してください。

_moveToTop: function() {
    return null;
},
于 2013-02-14T04:15:48.057 に答える