web-dev-qa-db-ja.com

jQueryによってsrcに供給されるクリア/空のIFRAME？

「about：blank」で始まり、jqueryによってsrcが供給されるモーダル内にiframeを取得しました。

これはすでに問題なく機能しますが、iframe srcが変更に設定されている場合、新しいコンテンツの読み込み中にモーダルが古いコンテンツを表示するのに常に遅延があります。

新しいsrcが与えられる前にiframeを即座にクリアするにはどうすればよいですか？

ここにいくつかのコードがあります：

$(function() {
      $('a.modal-k2-<?php echo $this->item->id; ?>').click(function() {
            window.top.$('#modalHolderK2_title').text('<?php echo $author->name . ' - ' . $this->item->title; ?>');
            if (window.top.$('#modalHolderK2_iframe').attr('src') != '<?php echo $itemlink; ?>') {
                window.top.$('#modalHolderK2_iframe').attr('src','about:blank');
                window.top.$('#modalHolderK2_iframe').attr('src','<?php echo $itemlink; ?>');
            }
            window.top.$('#modalHolderK2').modal();
            return false;
      });
    });

「window.top。$（ '＃modalHolderK2_iframe'）。attr（ 'src'、 'about：blank）;」のようです。新しいsrcがiframeに渡される前に完全に実行されません。

簡単な解決策があると思いますが、まだうまくいくものは見つかりませんでした。

新しいコンテンツが呼び出されたときに古いコンテンツを表示するモーダルを避けたいだけです。

javascriptjqueryiframeclear
12
user1873194

次のページをロードする前に空白のページをレンダリングする機会をiframeに与えるには、起動時にフレームソースを最終URLに更新するタイムアウトを設定することを検討してください。例：

window.top.$('#modalHolderK2_iframe').attr('src','about:blank');
setTimeout(function() {
    window.top.$('#modalHolderK2_iframe').attr('src','http://www.yoururl.com/');
}, 100);
//....
window.top.$('#modalHolderK2').modal();
10
FixMaker

$（ "＃iframe"）。contents（）。find（ "body"）。html（ ''）;

9
techknowfreak

不必要な100ミリ秒の待機をユーザーに強制する代わりに、iframeを.remove()して、新しいiframeを作成することができます。

    $(function () {
        $('a.modal-k2-<?php echo $this->item->id; ?>').click(function () {
            window.top.$('#modalHolderK2_title').text('<?php echo $author->name . ' - ' . $this->item->title; ?>');

            //cache reference to reduce querying for elements:
            let $modalIframe = window.top.$('#modalHolderK2_iframe');

            if ($modalIframe.attr('src') != '<?php echo $itemlink; ?>') {
                let $iframeParent = $modalIframe.parent(); //where we'll put the new iframe

                //remove the iframe:
                $modalIframe.remove();

                //create a new iframe and append it to $iframeParent
                $modalIframe = $('<iframe></iframe>').attr('id', 'modalHolderK2_iframe').attr('src', '<?php echo $itemlink; ?>');
                $modalIframe.appendTo($iframeParent);
            }
            $modalIframe.modal();
            return false;
        });
    });
1
Sean Kendle
 $('#iframid').attr('src', '');
1
Satendra Jindal

次のページをロードする前に、srcをabout：blankにリセットするのはどうですか？

var ifr=window.top.$('#modalHolderK2_iframe');
if (ifr.attr('src') != '<?php echo $itemlink; ?>') {
ifr.on('load',function(){
    // need to remove onload
    $(this).off('load');
    this.src='<?php echo $itemlink; ?>';
    window.top.$('#modalHolderK2').modal();
});
ifr.attr('src','about:blank');
}
0
Christophe

簡単な修正は、空のiframeのように見えるdivを作成することです。次に、それを関数の最初の行に表示し、iframeのonLoadイベントで、divを再度非表示にします。そうすれば、新しいコンテンツを読み込んでいるときにiframeがどのようにレンダリングされるかを扱う必要はまったくありません。

要求に応じて、提案されたソリューションの簡単なモックアップ（jQuery呼び出しを読み取ることができると思いますか？）。

<div id="hider" style="display:none"></div>
<iframe id="myIFrame" onload="$('#hider').hide()" />

<script type="text/javascript">
    function updateIframe(newUrl) {
      $('#hider').show();
      $('#myIFrame').attr('src', newUrl);
    }
</script>

次に、CSSを使用して、iframeと完全に重なるようにdivを配置します。 divを表示してiFrameを非表示にし、iframeの読み込みが完了すると、そのonloadイベントがdivを再び非表示にして、新しいコンテンツを表示します。

0
AmericanUmlaut