angular 2手柄点击iframe内的链接

Question

有没有办法捕获对iframe 内链接的点击？

<iframe *ngIf="currentFrameUrl" id="contentFrame" [src]="currentFrameUrl | safe"></iframe>

我的 iframe 组件只包含一个订阅可观察变量的简单代码。

export class ContentFrameComponent implements OnInit {
    currentFrameUrl: string;
    currentMenuState: boolean;
    @ViewChild('contentFrame') iframe: ElementRef;

    constructor(private frameService: ContentFrameService) {        
      this.currentMenuState = true;      
    }

    ngOnInit(): void {
      this.frameService.providerCurrentUrl$.subscribe(data => this.currentFrameUrl = data);
      this.frameService.providerMenuState$.subscribe(data => this.currentMenuState = data);
    }

    ngAfterViewInit() {
      let doc = this.iframe.nativeElement.contentDocument ||this.iframe.nativeElement.contentWindow;
      if (typeof doc.addEventListener !== undefined) {
        console.log("inside if - addEventListener") // Is shown
        doc.addEventListener("click", this.iframeClickHandler, false)
      } else if (typeof doc.attachEvent !== undefined) {
        console.log("inside if - attachEvent ") // Does not show
        doc.attachEvent("onclick", this.iframeClickHandler)
      }
    }

    iframeClickHandler(): void {
      console.log("Click test") // Does not show
    }
}

我的目标是捕捉iframe 链接上的点击事件，停止其传播并使用router.navigate 或location.go/location.replaceState 设置iframe 链接的url。还不确定哪个选项更好。

我无法控制iframe 中加载的页面。我只知道，链接应该包含可以与我的动态路由一起使用的url。

Answer 1

使用 @HostListener('window:blur', ['$event']) 装饰器，在 IFrame 点击时附加此装饰器触发器的方法。

  @HostListener('window:blur', ['$event'])
  onWindowBlur(event: any): void {
    console.log('iframe clicked');
  }

注意：这也适用于跨域操作。

Answer 2

为什么不能使用简单的onclick？

试试这个代码：

<iframe *ngIf="currentFrameUrl" id="contentFrame" [src]="currentFrameUrl | safe" (onclick)="clicked()"></iframe>

点击

Answer 3

<iframe *ngIf="currentFrameUrl" id="contentFrame" [src]="currentFrameUrl | safe" #iframe></iframe>

和

export class ContentFrameComponent implements OnInit {
      currentFrameUrl: string;
      currentMenuState: boolean;
      @ViewChild('iframe') iframe: ElementRef;

      constructor(private frameService: ContentFrameService) {
        this.currentMenuState = true;
      }

      ngOnInit(): void {
        this.frameService.providerCurrentUrl$.subscribe(data => this.currentFrameUrl = data);
        this.frameService.providerMenuState$.subscribe(data => this.currentMenuState = data);
      }

      ngAfterViewInit() {
        let doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
        if (typeof doc.addEventListener !== undefined) {
          doc.addEventListener("click", this.iframeClickHandler, false)
        } else if (typeof doc.attachEvent !== undefined) {
          doc.attachEvent("onclick", this.iframeClickHandler);
        }
      }

      iframeClickHandler() {
        alert("Iframe clicked");
      }
    }

注意：这可能不适用于跨域操作。