iframe滚动条在隐藏后不显示并显示iframe元素

Question

当iframe元素隐藏并再次显示时，iframe元素上的滚动条未显示。

代码片断：

<iframe id="imageFrame" scrolling="yes" src="https://wallpaperscraft.com/image/the_legend_of_zelda_elf_shield_sky_link_22301_1280x1024.jpg" width="100" height="100"> 

</iframe> 
<button id="hideFrame"> 
Hide Frame 
</button> 
<button id="showFrame"> 
Show Frame 
</button> 

$(document).ready(function() { 
    $("#hideFrame").click(function() { 
    $("#imageFrame").hide(); 
    }); 

    $("#showFrame").click(function() { 
    $("#imageFrame").show(); 
    }); 
}); 

的jsfiddle DEMO： DEMO

Answer 1

解决方案1：

HTML：

<iframe id="imageFrame" scrolling="yes" src="https://wallpaperscraft.com/image/the_legend_of_zelda_elf_shield_sky_link_22301_1280x1024.jpg" width="100" height="100"> 
</iframe> 
<button id="hideFrame"> 
    Hide Frame 
</button> 
<button id="showFrame"> 
    Show Frame 
</button> 

CSS：

.hide{visibility: hidden;position: absolute;} 
.show{visibility: visible;} 

的jQuery：

$(document).ready(function() { 
    $("#hideFrame").click(function() { 
    $("#imageFrame").addClass('hide').removeClass('show'); 
    }); 

    $("#showFrame").click(function() { 
    $("#imageFrame").addClass('show').removeClass('hide'); 
    }); 
}); 

演示：https://jsfiddle.net/17knnLsb/7/

---

解决方案2：

HTML：

<div class="iframe-wrapper"></div> 
<button id="hideFrame"> 
    Hide Frame 
</button> 
<button id="showFrame"> 
    Show Frame 
</button> 

的jQuery：

var iframeMarkup = '<iframe id="imageFrame" scrolling="yes" src="https://wallpaperscraft.com/image/the_legend_of_zelda_elf_shield_sky_link_22301_1280x1024.jpg" width="100" height="100"></iframe>'; 

$(document).ready(function() { 
    $('.iframe-wrapper').append(iframeMarkup); 
    $("#hideFrame").click(function() { 
    $('.iframe-wrapper').find('iframe').remove(); 
    }); 

    $("#showFrame").click(function() { 
    $('.iframe-wrapper').append(iframeMarkup); 
    }); 
}); 

演示：https://jsfiddle.net/17knnLsb/3/