ANGULAR框架下如何禁用iframe内部的escape(ESC)按键

原因说明 #

你之前的写法无法生效是因为iframe属于独立的浏览器浏览上下文，内部触发的按键事件不会冒泡到父页面的document上，所以父页面的HostListener无法捕获到iframe内的ESC事件。

同域iframe解决方案 #

如果你的iframe加载地址和当前Angular项目是同域的，直接获取iframe元素后绑定内部document的事件即可：

1. 首先通过ViewChild获取iframe的DOM引用，在iframe加载完成后绑定按键监听事件：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit, OnDestroy {
  @ViewChild('iframe') iframeRef!: ElementRef<HTMLIFrameElement>;
  urlIFrame = '你的iframe加载地址';
  private escKeyHandler?: (event: KeyboardEvent) => void;

  ngAfterViewInit(): void {
    const iframe = this.iframeRef.nativeElement;
    // 定义ESC拦截逻辑
    this.escKeyHandler = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        event.preventDefault();
        event.stopPropagation();
        // 此处可添加你需要的自定义处理逻辑
      }
    };
    // 等待iframe加载完成后绑定事件
    iframe.onload = () => {
      iframe.contentDocument?.addEventListener('keydown', this.escKeyHandler);
    };
  }

  // 组件销毁时移除事件监听，避免内存泄漏
  ngOnDestroy(): void {
    const iframe = this.iframeRef.nativeElement;
    iframe.contentDocument?.removeEventListener('keydown', this.escKeyHandler!);
  }
}

跨域iframe解决方案 #

如果iframe加载的是跨域资源，且你可以控制iframe内部的代码，可通过postMessage协作实现：

1. 在iframe内部页面添加ESC事件监听，拦截后通知父页面：

// iframe内部页面的JS代码
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    event.preventDefault();
    // 生产环境建议将通配符*替换为父页面的实际域名，提升安全性
    window.parent.postMessage({ type: 'iframeEscPressed' }, '*');
  }
});

2. 在Angular父页面监听message事件处理对应逻辑：

@HostListener('window:message', ['$event'])
handleIframeMessage(event: MessageEvent) {
  // 校验消息来源，避免恶意请求
  if (event.origin !== '你的iframe对应的域名') return;
  if (event.data?.type === 'iframeEscPressed') {
    // 处理ESC触发后的自定义逻辑
  }
}

注：如果iframe加载的是你不可控的第三方跨域资源，出于浏览器同源策略限制，没有办法直接拦截其内部的ESC按键事件。

内容的提问来源于stack exchange，提问作者souzatorquato