Question

请参阅以下代码，基本上我有以下内容：

Stackblitz：https://stackblitz.com/edit/angular-d6hd8u

HTML：app.component.html

<h1>YouTube Test</h1>
<iframe 
  sandbox="allow-scripts allow-same-origin allow-popups"
  src="https://www.youtube.com/embed/vN-96ej5SgQ"
  width="500px"
  height="350px">
  </iframe>

<h1>Catching iFrame Events</h1>
<p>{{ event_status | json }}</p>

TS：app.component.ts

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  event_status = "Waiting for event to fire ...";

  @HostListener('window:message', ['$event'])
  updateStatus(event) {
    this.event_status = "Triggered ...";
    var mainWindow = event.source;
    var result = '';
    try {
      result = eval(event.data);
    } catch (e) {
      result = 'eval() threw an exception.';
    }
    mainWindow.postMessage(result, event.origin);    
    this.event_status = result;
  }

我试图＆＃34;赶上＆＃34; /＆＃34;听＆＃34;当您点击YouTube的标题时（例如），它会打开popup我允许通过<iframe sandbox="... allow-popups">，但我似乎无法抓住它...... < / p> 总的来说，我可以问用户 - 如果他真的想去YouTube - 或取消...

有什么想法吗？

如何在iFrame中检测并捕获allow-popups事件

0 个答案: