我正在我的 flutter web 应用程序中显示 iframe/url。在此 iframe 中,我只想启用悬停并禁用转义键和单击事件。这可以做到吗?
以下是显示 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中,我想实现以下行为:
Enable only hover events.
Disable the escape key.
Disable click events.
我尝试在 IFrameElement 上使用 onKeyPress 和 onClick 事件,但它似乎并不能阻止转义键或单击事件。此外,我还附加了一个通用 window.onKeyPress 事件侦听器,但它不会捕获 iframe 内的事件。
有没有办法在 Flutter Web 的 iframe 中实现这些特定的事件处理要求?
是的 有可能 你可以随时随地改变
是的,这是可能的。 您可以使用“RawKeyboardListerner”小部件来捕获键盘事件并相应地调整 iframe 的属性