Communication between flutter app and h5

H5 end

<!DOCTYPE html>
<html>
<head>
    <title>H5 Page</title>
</head>
<body>
    <h1>Hello from H5!</h1>

    <script>
        // 定义一个函数来处理来自Flutter的通知
        function handleFlutterNotification(message) {
    
    
            alert('Received notification from Flutter: ' + message);
            // 在这里执行你的处理逻辑
        }

        // 添加一个事件监听器,监听来自Flutter应用程序的通知
        document.addEventListener('flutterNotification', function (e) {
    
    
            const message = e.detail; // 获取通知的详细信息
            handleFlutterNotification(message);
        });
    </script>
</body>
</html>

On the flutter side, 'flutterNotification' is an event, and detail can be regarded as a parameter.

// 在需要的地方发送通知到H5页面
final webViewController = await _controller.future;
final message = 'Hello from Flutter!';
webViewController.evaluateJavascript("document.dispatchEvent(new CustomEvent('flutterNotification', { detail: '$message' }))");

Guess you like

Origin blog.csdn.net/weixin_44911775/article/details/132811208