iframe要素を非表示にして表示しても、iframeスクロールバーが表示されません。

Question

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/