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

时间:2016-08-22 14:15:04

标签: javascript jquery html google-chrome iframe

当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

1 个答案:

答案 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);
  });
});

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