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' }))");