javascript - 仅刷新某些 iframe，而不使用 jQuery 刷新整个页面

Question

当页面最初加载时，我有一个隐藏的 iframe 和其他可见的 iframe。然后，当单击一个按钮时，我需要隐藏以前可见的一个按钮，然后取消隐藏另一个按钮(实际上，我也需要在变得可见的按钮上设置 src 属性，但接下来我将解决这个问题)。我不想刷新整个页面(因此下面返回 false)。

下面的代码在单击按钮时不会显示红色 iframe2。你能告诉我为什么吗？

<form>
  <h1>Test</h1>
  <input type="submit" id="search" value="Search" />
</form>
<iframe id="frame0" style="background-color: blue" height="200" width="800" ></iframe>
<iframe id="frame1" style="background-color: yellow" height="200" width="800" ></iframe>
<iframe id="frame2" style="visibility: hidden; background-color: red" height="200" width="800" ></iframe>

<script type="text/javascript">
$(document).ready(function(){
    $( "#search" ).click(function(event) {
        $("#frame1").hide();
        $("#frame2").show();
        $('#frame2')[0].contentWindow.location.reload(true);
        return false;
    });
});
</script>

Answer 1

用户disply插入visibility编辑，您的frame2如下:

<iframe id="frame2" style="display: hidden; background-color: red" height="200" width="800" ></iframe>

这里是 jsfiddle 的工作:

https://jsfiddle.net/keval/vqyczm7a