This bounty has ended. Answers to this question are eligible for a +50 reputation bounty. Bounty grace period ends in 22 hours. Ruchir is looking for an answer from a reputable source.
I have a javascript class and Html file for Flutter web-app. Both these files are in web folder. I'm loading these using flutter class with below code :
class WebClass implements CommonAbstractClass {
@override
Widget build(BuildContext context) {
ui.platformViewRegistry.registerViewFactory(
'hello-html',
(int viewId) => IFrameElement()
..width = '640'
..height = '360'
..src = 'myHtmlFile.html'
..style.border = 'none');
return Scaffold(
appBar: AppBar(title: const Text('Web App')),
body: Stack(
children: const [
SizedBox(
height: 500,
child: HtmlElementView(
viewType: 'hello-html',
)),
],
),
);
}
}
Above code loads html and works well. The javascript prints the result. What I'm looking for is to get that same result in flutter file. Is there any way to get result from html/javascript to flutter while using HtmlElementView ?
2条答案
按热度按时间ws51t4hk1#
To get data from a JavaScript class to a Flutter app, you can use a platform channel to communicate between the two. This involves creating a channel on the Flutter side and a corresponding handler on the JavaScript side, and then using the postMessage method to send data from the JavaScript side to the Flutter side.
Here is an example of how you might implement this:
In the Flutter app, create a MethodChannel object and call its setMethodCallHandler method to register a callback that will receive messages from the JavaScript side. The setMethodCallHandler method takes a function that will be called every time a message is received from the JavaScript side. The function should take an MethodCall object as an argument, which contains the details of the message that was sent.
In the HTML file, create a window.onload event handler that will be called when the page loads. Inside the event handler, create a MessageChannel object and call its postMessage method to send a message to the Flutter side. The postMessage method takes two arguments: the message to be sent and the channel to send it on.
In the Flutter app, use the MethodCall object to get the message that was sent from the JavaScript side. Then, use the PlatformException class to handle any errors that might occur during the communication process.
You can also use the MethodChannel object to call methods on the JavaScript side from the Flutter side. To do this, you can use the invokeMethod method on the MethodChannel object and pass the method name and any arguments as arguments to the method.
oalqel3c2#
是的,可以从Flutter文件中的HTML/JavaScript代码中获取结果。要做到这一点,您可以使用
postMessage()
方法将消息从JavaScript代码发送到Flutter代码。首先,您需要在
IFrameElement
中添加一个事件侦听器来侦听message
事件。此事件侦听器应调用window.parent.postMessage()
方法,该方法将向IFrameElement
的父帧发送一条消息。下面是一个示例,说明如何执行此操作:然后,在你的Flutter代码中,你可以使用
Window.onMessage
事件来监听来自IFrameElement
的消息。每当IFrameElement
使用window.parent.postMessage()
方法发送消息时,这个事件就会被触发。下面是一个例子,说明如何在你的Flutter代码中监听这些消息:通过这些更改,HTML/JavaScript代码可以向Flutter代码发送消息,并且可以使用
Window.onMessage
事件侦听这些消息并根据需要处理它们。