Flutter Web中如何禁用iframe的Esc键和点击、仅启用悬浮事件？

问题 #

在Flutter Web应用中嵌入iframe后，希望实现以下行为：

• 仅启用hover（悬浮）事件
• 禁用Esc键
• 禁用点击事件

尝试在IFrameElement和全局window上绑定事件监听，但无法捕获或阻止iframe内的Esc键和点击事件。当前使用的iframe显示代码如下：

// ignore: avoid_web_libraries_in_flutter
import 'dart:html';
import 'dart:ui' as ui;
import 'dart:js' as js;
import 'package:flutter/material.dart';

class IframeExp extends StatefulWidget {
  final String url;

  const IframeExp({super.key, required this.url});
  @override
  State<IframeExp> createState() => _IframeExpState();
}

class _IframeExpState extends State<IframeExp> {
  final IFrameElement _iFrameElement = IFrameElement();

  @override
  void initState() {
    _iFrameElement.style.height = '100%';
    _iFrameElement.style.width = '100%';
    _iFrameElement.src = widget.url;
    _iFrameElement.style.border = 'none';

// ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      'iframeElement',
      (int viewId) => _iFrameElement,
    );

    _iFrameElement.onKeyPress.listen((event) {
      print("[Escape]${event.charCode} ${String.fromCharCode(event.charCode)}");
    });
    _iFrameElement.onClick.listen((event) {
      print("[Escape] ${event}");
    });

    window.onKeyPress.listen((KeyboardEvent e) {
      print("[Escape] ${e.charCode} ${String.fromCharCode(e.charCode)}");
    });

    super.initState();
  }

  final Widget _iframeWidget = HtmlElementView(
    viewType: 'iframeElement',
    key: UniqueKey(),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height / 2,
            width: MediaQuery.of(context).size.width,
            child: _iframeWidget,
          )
        ],
      ),
    );
  }

  void disableEscapeKey() {}

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }
}

解决方案 #

要实现需求，核心需处理iframe的事件冒泡和跨域限制，不同场景下实现方式不同：

1. 同域iframe（嵌入URL与Flutter Web应用同域名） #

同域下可直接访问iframe内部DOM和事件，实现步骤如下：

禁用点击与Esc键

等待iframe加载完成后，给内部文档绑定事件并阻止默认行为：

@override
void initState() {
  super.initState();
  // 原有初始化代码...
  
  _iFrameElement.onLoad.listen((_) {
    final iframeDoc = _iFrameElement.contentDocument;
    if (iframeDoc != null) {
      // 拦截所有点击事件
      iframeDoc.addEventListener('click', (Event e) {
        e.preventDefault();
        e.stopPropagation();
      });

      // 拦截Esc键（监听keydown，Esc在keypress中可能不触发）
      iframeDoc.addEventListener('keydown', (KeyboardEvent e) {
        if (e.keyCode == 27) {
          e.preventDefault();
          e.stopPropagation();
        }
      });
    }
  });
}

保留hover事件

无需额外操作，只要iframe内容未通过CSS禁用hover，悬浮事件会正常触发。

2. 跨域iframe（嵌入URL与Flutter Web应用不同域名） #

受浏览器同源策略限制，无法直接操作跨域iframe内部，可通过以下方式实现需求：

禁用点击事件：透明遮罩层

在Flutter层给iframe叠加透明的GestureDetector，拦截所有点击事件，同时允许hover穿透：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        SizedBox(
          height: MediaQuery.of(context).size.height / 2,
          width: MediaQuery.of(context).size.width,
          child: Stack(
            children: [
              _iframeWidget,
              // 透明遮罩，拦截点击事件
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {}, // 空实现拦截点击
                onTapDown: (_) {},
                onTapUp: (_) {},
                // 不拦截hover，事件会自动穿透到iframe
              ),
            ],
          ),
        )
      ],
    ),
  );
}

禁用Esc键：全局监听

跨域下无法直接拦截iframe内部的Esc键，只能在全局window上监听尝试阻止事件冒泡（若iframe已自行捕获Esc键，此方法无效）：

@override
void initState() {
  super.initState();
  // 原有初始化代码...
  
  window.onKeyDown.listen((KeyboardEvent e) {
    if (e.keyCode == 27) {
      e.preventDefault();
      e.stopPropagation();
    }
  });
}

关键注意点 #

• 优先监听keydown而非keypress：Esc键在keypress事件中可能不触发。
• 跨域限制是核心障碍：跨域下无法直接修改iframe内部，只能通过外层遮罩或全局监听实现部分需求。
• hover事件默认保留：只要不设置pointer-events: none，悬浮事件会自动传递到iframe。

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