在隐藏和显示Iframe元素后，Iframe滚动条不显示在chrome中

iframe scroll bars are not displaying in chrome after hide and show the iframe element

本文关键字：Iframe 显示 chrome 滚动条 元素 隐藏      更新时间：2023-09-26

当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演示:演示

解决方案一:

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/

相关文章：