隐藏并显示 iframe 元素后，iframe 滚动条未在 chrome 中显示答案

【问题标题】：iframe scroll bars are not displaying in chrome after hide and show the iframe element隐藏并显示 iframe 元素后，iframe 滚动条未在 chrome 中显示
【发布时间】：2016-12-29 03:25:09
【问题描述】：

当 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

【问题讨论】：

标签： javascript jquery html google-chrome iframe

【解决方案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/

【讨论】：

这里的问题是，如果 iframe 内部发生任何变化 - 显示/隐藏后更改将不会生效，因为您重新加载它。
我认为这要好得多。请注意，您实际上并不需要 z-index 和 opacity。
请注意，我不是提出这个问题的人。刚刚在这里添加了我的评论:)
@Dekel 感谢您的 cmets。如果答案正确，您可以投票：D
如果你能在chrome上添加一些导致这种行为的源代码会很棒（这是一个错误吗？）