当iframe元素隐藏并再次显示时,iframe元素上的滚动条不会显示。
CODE SNIPPET
<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
答案 0 :(得分:2)
解决方案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);
});
});