13

我在模态框内有一个 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 之前没有完全执行。

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

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

4

6 回答 6

12

$("#iframe").contents().find("body").html('');

于 2013-08-11T06:38:51.570 回答
10

为了有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();
于 2012-12-03T17:13:37.977 回答
2 
 $('#iframid').attr('src', '');
于 2014-10-10T06:21:05.947 回答
1

无需强制用户等待 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;
        });
    });
于 2017-12-13T14:55:59.700 回答
0

在加载下一页之前将 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');
}
于 2012-12-03T16:44:33.393 回答
0

一个简单的解决方法是创建一个看起来就像一个空 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，显示新内容。

于 2012-12-03T16:38:22.393 回答