clear iframe content when click away/close iframe

Question

I have this catalog I made that shows details of a product in an iframe that shows up when clicked. My problem is when they click away and the iframe closed and they click on a new item the past item shows up for a second then it changes to the correct content. I tried to load a blank iframe before the content get loaded, but that didn't get the job done, so I am thinking of maybe I would have to add some code that would clear the iframe upon clicking away from it.

<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>

Answer 1

Maybe might be able to do one of these:

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

or

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

You could use one of these commands when you close the iframe popup, that way nothing will show in the element the next time it is shown.

Answer 2

I had a similar problem not that long ago. I found the best solution was to dynamically add the iFrame in JavaScript.

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

You can then remove the iFrame from the HTML. Then your code to clear the iFrame would actually just need to remove it from the div.