如何使用HtmlElementView从javascript获取数据到flutter

uqdfh47h  于 2022-12-02  发布在  Java
关注(0)|答案(2)|浏览(206)

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 ?

ws51t4hk

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.

MethodChannel channel = MethodChannel('my_channel');

channel.setMethodCallHandler((MethodCall call) async {
  // Handle the message from the JavaScript side
});

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.

window.onload = function() {
  // Create the MessageChannel object
  var channel = new MessageChannel();

  // Send a message to the Flutter side
  channel.postMessage('Hello from JavaScript', 'my_channel');
}

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.

MethodChannel channel = MethodChannel('my_channel');

channel.setMethodCallHandler((MethodCall call) async {
  try {
    // Get the message from the MethodCall object
    String message = call.arguments;

    // Do something with the message
  } on PlatformException catch (e) {
    // Handle any errors that occurred 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.

oalqel3c

oalqel3c2#

是的,可以从Flutter文件中的HTML/JavaScript代码中获取结果。要做到这一点,您可以使用postMessage()方法将消息从JavaScript代码发送到Flutter代码。
首先,您需要在IFrameElement中添加一个事件侦听器来侦听message事件。此事件侦听器应调用window.parent.postMessage()方法,该方法将向IFrameElement的父帧发送一条消息。下面是一个示例,说明如何执行此操作:

# Add an event listener to the IFrameElement
window.addEventListener("message", (event) => window.parent.postMessage(event.data, "*"));

然后,在你的Flutter代码中,你可以使用Window.onMessage事件来监听来自IFrameElement的消息。每当IFrameElement使用window.parent.postMessage()方法发送消息时,这个事件就会被触发。下面是一个例子,说明如何在你的Flutter代码中监听这些消息:

// Create a Window object
var window = window ?? html.window;

// Listen for messages from the IFrameElement
window.onMessage.listen((event) {
  // Print the message data
  print(event.data);
});

通过这些更改,HTML/JavaScript代码可以向Flutter代码发送消息,并且可以使用Window.onMessage事件侦听这些消息并根据需要处理它们。

相关问题