Flutter Web嵌入iframe在移动端拉伸且无法滚动的问题求助

问题分析 #

当前实现的动态高度逻辑在桌面端正常，但移动端暴露两个核心问题：

1. 手机端内容拉伸：多因父页面与Flutter子页面的viewport配置不匹配，或iframe未正确继承响应式规则，导致页面被强制缩放拉伸。
2. 平板端无法滚动：iframe的触摸滚动事件被拦截，或高度计算偏差导致内容溢出后无法触发滚动行为。

解决方案 #

1. 修正父页面iframe及容器样式 #

给iframe外层包裹容器，添加移动端适配CSS规则，同时优化iframe属性：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Responsive Iframe</title>
  <style>
    .iframe-container {
      width: 100%;
      overflow: auto;
      /* 解决移动端触摸滚动卡顿问题 */
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
    }
    #widgetIframe {
      width: 100%;
      border: 0;
      /* 禁用iframe自身滚动，由外层容器接管 */
      overflow: hidden;
      /* 防止移动端强制拉伸 */
      max-width: 100%;
      transform-origin: top left;
    }
  </style>
</head>
<body>
  <div class="iframe-container">
    <iframe id="widgetIframe" src="https://asp.zephiros.com/test_lenis/vizitky/index.html"></iframe> 
  </div>

  <script type="text/javascript">
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

    eventer(messageEvent, function(e) {
      // 验证消息来源，提升安全性
      if (e.origin !== "https://asp.zephiros.com") return;
      
      if ((typeof e.data === 'string') && (e.data.indexOf('documentHeight') > -1)) {
        var height = e.data.split('documentHeight:')[1];
        height = parseInt(height, 10) + 20; // 缩小额外高度，减少空白
        
        document.getElementById('widgetIframe').style.height = height + 'px';
        // 同步容器最小高度，确保滚动区域正确
        document.querySelector('.iframe-container').style.minHeight = height + 'px';
      }
    }, false);
  </script>
</body>
</html>

2. 优化Flutter Web子页面的高度发送逻辑 #

由于你可控子页面，需在Flutter中监听窗口大小变化、路由切换等场景，实时发送准确的页面高度：

在Flutter主页面的State类中添加代码：

import 'dart:html' as html;
import 'package:flutter/material.dart';

class HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    // 页面加载完成后发送初始高度
    WidgetsBinding.instance.addPostFrameCallback((_) => _sendPageHeight());
    // 监听窗口大小变化
    WidgetsBinding.instance.addListener(_handleResize);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeListener(_handleResize);
    super.dispose();
  }

  void _handleResize() => _sendPageHeight();

  void _sendPageHeight() {
    // 获取页面完整滚动高度，确保包含所有内容
    final height = html.document.body?.scrollHeight ?? 0;
    // 发送给父页面，指定目标origin提升安全性
    html.window.parent?.postMessage('documentHeight:$height', '*');
  }
}

同时确保Flutter Web的web/index.html中viewport配置正确：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

3. 关键注意事项 #

• 触摸滚动适配：添加-webkit-overflow-scrolling: touch和touch-action: pan-y，解决iOS等移动端滚动卡顿或无响应问题。
• 高度计算准确性：子页面需发送scrollHeight而非clientHeight，确保包含所有滚动内容的完整高度。
• viewport一致性：父页面与子页面的viewport配置需匹配，避免缩放冲突导致内容拉伸。
• 消息安全验证：父页面中通过e.origin验证消息来源，防止恶意消息篡改iframe高度。

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