仅刷新某些 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

Answer 2

jQuery 的

.show() and

.hide() 使用 CSS 显示属性，而不是可见性属性。

.show()

=

css('display', 'block')

.hide()

=

css('display', 'none')

但是，您可以使用

.toggle()

根据元素的当前状态隐藏或显示元素。我认为这就是您所需要的，因为您想隐藏以前可见的那个。

您需要更改

iframe

可见性样式以使用显示

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

然后不要显示和隐藏 iframe，而是使用

.toggle()

$( "#search" ).click(function(event) {
    $("#frame1").toggle();
    $("#frame2").toggle();
    $('#frame2')[0].contentWindow.location.reload(true);
    return false;
});

查看我的工作示例：https://jsfiddle.net/o2gxgz9r/14250/

Answer 3

基本

同源 - Iframe

document.getElementById('frame2').contentDocument.location.reload(true);

不同来源 - Iframe

var iframe = document.getElementById('frame2');
iframe.src = iframe.src;

角度

HTML

<iframe
        [id]="iFrameId"
        [src]="data.iFrameUrl | safe"
        width="100%"
        height="640"
      ></iframe>
      <div class="vidyard-section" *ngIf="vidyard">
        <a
          class="vidyard-card"
          href="#"
          target="_self"
          [attr.rel]="undefined"
          (click)="onClickCard($event, clip)"
          *ngFor="let clip of videoClips[0]?.clips"
        >
         

打字稿

onClickCard(evt: any, clip: any) {
    evt.preventDefault();
    if (this.isBrowser) {
      (this.dom.querySelector('iframe') as HTMLElement).setAttribute(
        'src',
        this.iframePath + clip.id
      );
    }
  }