单击离开/关闭 iframe 时清除 iframe 内容答案

【问题标题】：clear iframe content when click away/close iframe单击离开/关闭 iframe 时清除 iframe 内容
【发布时间】：2023-04-10 01:33:02
【问题描述】：

我制作了这个目录，它在 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>

【问题讨论】：

标签： javascript jquery iframe history

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

也许可以做到以下几点：

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

或

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

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

【讨论】：