如何将Flutter Web以iframe形式全屏嵌入HTML页面

一、基础CSS全局配置（解决高度无法占满视口的问题） #

仅设置iframe高度100%无法生效的核心原因是，所有父级元素的高度都需要同步设置为100%，同时清除浏览器默认边距：

/* 全局重置 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden; /* 避免外层出现冗余滚动条 */
}
/* 若有包裹iframe的父容器，也需要设置宽高100% */
.iframe-wrapper {
  height: 100%;
  width: 100%;
}
iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

二、Flutter Web侧适配（避免Flutter自身高度限制） #

修改Flutter项目中web/index.html的配置，确保Flutter根容器占满整个iframe视口：

1. 调整viewport标签增加缩放限制，避免布局溢出：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 给body和Flutter挂载的根元素增加高度适配样式：

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
#root {
  height: 100%;
  width: 100%;
}

三、动态高度适配方案（解决onLoad不触发、页面高度随内容变化的场景） #

之前onLoad事件未触发大概率是绑定时机晚于iframe加载完成时间，优先用postMessage双向通信方案兼容跨域场景：

第一步：Flutter Web侧增加高度推送逻辑 #

在页面布局完成后向父页面发送当前页面实际高度：

import 'dart:js' as js;

// 在initState之后或者WidgetsBinding.instance.addPostFrameCallback回调中调用
void sendHeightToParent(BuildContext context) {
  double pageHeight = MediaQuery.of(context).size.height;
  js.context.callMethod('postMessage', [pageHeight.toString(), '*']);
}

第二步：父页面接收高度动态调整iframe尺寸 #

const iframe = document.getElementById('替换为你的iframe元素ID');
// 先绑定事件再设置src，避免漏触发onLoad
iframe.onload = () => {
  console.log('iframe加载完成');
};
iframe.src = "你的Flutter Web访问链接";

// 监听Flutter侧发来的高度消息
window.addEventListener('message', (e) => {
  // 生产环境可增加来源校验，避免安全风险：if (e.origin !== '你的Flutter Web域名') return;
  const pageHeight = e.data;
  iframe.style.height = `${pageHeight}px`;
});

内容的提问来源于stack exchange，提问作者Shashwat Aditya