Javascript 单击“离开/关闭iframe”时清除iframe内容

我制作了这个目录，它在一个iframe中显示了产品的详细信息，单击时就会显示出来。我的问题是，当他们单击离开，iframe关闭，他们单击一个新项目时，过去的项目会显示一秒钟，然后它会更改为正确的内容。我试图在加载内容之前加载一个空白的iframe，但这并没有完成工作，所以我想也许我必须添加一些代码，在点击离开iframe时清除它

<script>
//this affect the content that is loaded in the iframe when image is clicked
$( document ).load( "pageinit", "#page1", function() {

    $(".popupInfoLink").on("click", function(){
        var url = $(this).data("popupurl");
        $( "#popupInfo iframe" ).attr("src", url);
    });

});
</script>

<a class="popupInfoLink" href="#popupInfo" data-rel="popup" data-position-to="window" data-popupurl="product.asp?itemid=[catalogid]"><img src= "/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0" width="320" height="300" alt="pot" border="0" /></a>

<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
    <iframe src="about:blank" width="800px" height="800px"></iframe>

//这会影响单击图像时在iframe中加载的内容
$（document）.load（“pageinit”，“#page1”，function（）{
$（.popupInfoLink”）。在（“单击”，函数（）{
var url=$（this）.data（“popupupURL”）；
$（“popupInfo iframe”）.attr（“src”，url）；
});
});

不久前，我也遇到了类似的问题。我发现最好的解决方案是在JavaScript中动态添加iFrame

$(".popupInfoLink").on("click", function(){
  var url = $(this).data("popupurl");
  var $frame = $("<iframe>").attr({ "src": url, "width": "800px", "height": "800px" });
  $("#popupInfo").append($frame);
});

$（.popupInfoLink”）。在（“单击”，函数（）{
var url=$（this）.data（“popupupURL”）；
var$frame=$（“”）.attr（{“src”：url，“width”：“800px”，“height”：“800px”}）；
$（“#popupInfo”）.append（$frame）；
});

---

然后可以从HTML中删除iFrame。然后，清除iFrame的代码实际上只需要将其从div中删除。

可能可以执行以下操作之一：

jQuery('content iframe (or whatever the element is named').remove();

或

当关闭iframe弹出窗口时，可以使用这些命令之一，这样下次显示元素时，元素中将不会显示任何内容

jQuery('content iframe').empty();