Question

我正在使用角度开发SPA。按下历史记录后退按钮后，浏览器仅更改Youtube iframe，而不更改整个页面，我需要按两次后退按钮才能进入上一页（在第一次更新URL时不会）。仅当以下两个具有YT iframe元素的相同路线的链接出现时，才会发生这种情况。我需要保持历史记录导航，所以我不能只删除历史记录元素

Component
export class PlayerComponent implements OnInit {
  videoName: string;
  videoUrl: any;

  constructor(
    private sanitizer: DomSanitizer,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.route.params.subscribe( params => {
      this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + params.videoId);
    });
  }
}

HTML
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item border border-primary" *ngIf="videoUrl"
    [src] = "videoUrl"
    allowfullscreen>
  </iframe>
</div>

Answer 1

您无需在订阅中设置“ src”，只需替换网址：

.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

ngOnInit() {
    this.route.params.subscribe( params => {
        this.iframe.nativeElement.contentWindow.location.replace('https://www.youtube.com/embed/' + params.videoId);
    });
}

@ViewChild("iframe") iframe: ElementRef;

.html

  <iframe #iframe class="embed-responsive-item border border-primary" *ngIf="videoUrl"
    src="about:blank"
    allowfullscreen>
  </iframe>

Answer 2

一种解决方案是替换当前网址，这样iframe不会受到浏览器后退按钮的影响。

HTML模板：

<iframe #iframe></iframe>

TypeScript：

@ViewChild("iframe") iframe: ElementRef;

setUrl(url: string){
  this.iframe.nativeElement.contentWindow.location.replace(myUrl);
}

Answer 3

我知道这个问题已经回答了，但是我使用以下方法解决了这个问题：

  <div class="advertising" [innerHTML]="htmlValue() | safeHtml">
  </div>

  htmlValue() {
    return `
      <iframe src=" + this.iframeUrl() + " frameborder='0' scrolling='no' allow='autoplay'>
      </iframe>
    `;
  }

管道safeHtml仅返回：

    constructor(private sanitizer: DomSanitizer) {
    }

    transform(value) {
        return this.sanitizer.bypassSecurityTrustHtml(value);
    }

Angular 7 iframe历史记录后退按钮故障

3 个答案: