1
votes

Problème de bouton de retour de l'historique iframe angulaire 7

Je développe un SPA en utilisant angular. Lorsque le bouton de retour de l'historique est enfoncé, le navigateur ne change que l'iframe Youtube et non la page entière, je dois appuyer 2 fois sur le bouton de retour pour accéder à la page précédente complète (à la première fois, l'URL n'est pas mise à jour). Cela se produit uniquement lorsque vous suivez 2 liens avec le même itinéraire impliquant l'élément iframe YT. J'ai besoin de conserver la navigation dans l'historique, donc je ne peux pas supprimer uniquement les éléments d'historique

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>

typescript angular

1 commentaires

Pourquoi ne pas accepter ma réponse qui a été postée 13 heures plus tôt et qui était la solution à votre problème?

3 Réponses :

0
votes

Une solution consiste à remplacer l'URL actuelle, de cette façon l'iframe n'est pas affectée par le bouton de retour du navigateur.

Modèle HTML:

@ViewChild("iframe") iframe: ElementRef;

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

TypeScript: p>

<iframe #iframe></iframe>

0 commentaires

2
votes

Vous n'avez pas besoin de définir "src" dans l'abonnement, vous devez remplacer l'url:

.ts

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

.html

XXX

0 commentaires

0
votes

Je sais que cette question a déjà reçu une réponse, mais je l'ai résolue en utilisant comme ci-dessous:

    constructor(private sanitizer: DomSanitizer) {
    }

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

Le tuyau safeHtml vient de retourner:

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

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

0 commentaires