Javascript 清除/空 IFRAME 由 jQuery 提供给它的 src 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13687642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear/Empty IFRAME which gets fed it's src by jQuery?
提问by user1873194
I got an iframe inside a modal which starts on "about:blank" and does get fed src's by jquery.
我在一个以“about:blank”开始的模式中得到了一个 iframe，并且确实通过 jquery 获取了 src。
This works alright already, but when the iframe src is set to change, there is always a delay where the modal will still show the old content, while loading the new.
这已经可以正常工作了，但是当 iframe src 设置为更改时，在加载新内容时，模态仍然会显示旧内容总是会有延迟。
How can I instantly clear the iframe before a new src is given?
如何在给出新的 src 之前立即清除 iframe？
Here some code:
这里有一些代码：
$(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;
});
});
It seems that the "window.top.$('#modalHolderK2_iframe').attr('src','about:blank);" is not executed fully before the new src is passed to the iframe.
似乎“window.top.$('#modalHolderK2_iframe').attr('src','about:blank);” 在新的 src 传递给 iframe 之前没有完全执行。
I guess there is an easy solution but I didnt find anything which worked for me yet.
我想有一个简单的解决方案，但我还没有找到任何对我有用的东西。
I just want to avoid the modal to show old content when a new one is called.
我只想避免在调用新内容时显示旧内容的模式。
回答by FixMaker
To give the iframechance to render the the blank page before loading the next one, consider setting a timeout that updates the frame source to the final URL when fired, e.g.:
为了有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();
回答by techknowfreak
$("#iframe").contents().find("body").html('');
$("#iframe").contents().find("body").html('');
回答by Satendra Jindal
$('#iframid').attr('src', '');
回答by Sean Kendle
Instead of forcing a needless 100 ms wait on the user, you can just .remove()the iframe and create a new one:
而不是强迫用户等待不必要的 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;
});
});
回答by AmericanUmlaut
An easy fix would be simply to create a div that looks just like an empty iframe. Then display it in the first line of your function, and in the onLoad event of the iframe, hide the div again. Then you don't have to deal with how the iframe renders while it's loading its new content at all.
一个简单的解决方法就是创建一个看起来像一个空 iframe 的 div。然后在你函数的第一行显示，在iframe的onLoad事件中，再次隐藏div。然后，您根本不必处理 iframe 在加载新内容时如何呈现。
As requested, a quick mockup of my proposed solution (I'm assuming you can read jQuery calls?).
根据要求，我提出的解决方案的快速模型（我假设您可以阅读 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>
Now just use CSS to position the div such that it perfectly overlaps the iframe. You show the div to hide the iFrame, then when the iframe has finished loading, its onload event hides the div again, showing the new content.
现在只需使用 CSS 定位 div，使其与 iframe 完美重叠。您显示 div 以隐藏 iFrame，然后当 iframe 加载完成时，其 onload 事件再次隐藏 div，显示新内容。
回答by Christophe
How about just resetting the src to about:blank before loading the next page?
在加载下一页之前将 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');
}
