javascript - 隐藏并显示 iframe 元素后，iframe 滚动条不会在 chrome 中显示

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

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/