Question

我在一个模式中有一个iframe，它以“about：blank”开头，并且通过jquery获得了src。

这已经可以了，但是当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之前未完全执行。

我想有一个简单的解决方案，但我找不到任何对我有用的东西。

我只是想避免在调用新内容时显示旧内容的模式。

Answer 1

要在加载下一页之前让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();

Answer 2

$（ “＃IFRAME”）的内容（）发现（ “正文”）HTML（ ''）;。

Answer 3

 $('#iframid').attr('src', '');

Answer 4

不是强迫用户不必要的100毫秒等待，您只需.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;
        });
    });

Answer 5

一个简单的解决方法就是创建一个看起来就像空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来定位div，使其与iframe完美重叠。您显示div以隐藏iFrame，然后当iframe完成加载时，其onload事件再次隐藏div，显示新内容。

Answer 6

如何在加载下一页之前将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');
}

清除/清空IFRAME由jQuery提供它的src？

6 个答案: