I am displaying a iframe/url into my flutter web app. In this iframe I want to enable only hover and disable escape key and click event. Is this possible to do?
Following is complete code to display 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();
}
}
In this iframe, I want to achieve the following behaviors:
Enable only hover events.
Disable the escape key.
Disable click events.
I have tried using onKeyPress and onClick events on the IFrameElement, but it doesn’t seem to prevent the escape key or click events. Additionally, I have attached a general window.onKeyPress event listener, but it doesn’t capture events within the iframe.
Is there a way to achieve these specific event handling requirements within an iframe in Flutter web?
2
Answers
yes
it possible
you can change whenever and whatever
Yes it is possible.
You can use "RawKeyboardListerner" widget to capture keyboard events and adjust the iframe’s properties accordingly