Flutter中如何向WebView加载的assets资源文件传递参数

AI 小北

2026-9-24

为什么你的现有实现无法生效

直接在initialFile路径后拼接query参数不生效：加载本地assets文件时，系统会将完整路径作为文件名匹配资源，assets/index.html?name=foo&lastname=Bar本身不是存在的资源文件，因此无法加载。
构造POST请求传body不生效：本地file协议的静态资源没有服务端处理请求逻辑，WebView加载本地文件时会直接忽略请求body，参数无法传递到页面。

可行的实现方案

方案1：页面加载完成后JS注入传参（最常用，适配绝大多数场景）

等WebView加载完assets页面后，调用JS注入接口把参数挂载到页面全局对象，或者直接调用页面的参数接收方法。
Flutter端代码示例：

return Container(
  child: InAppWebView(
    initialFile: "assets/index.html",
    initialOptions: inAppWebViewGroupOptions,
    onPageFinished: (controller, url) async {
      // 注入参数到页面全局对象
      await controller.evaluateJavascript(source: '''
        window.passParams = {
          name: "foo",
          lastname: "Bar"
        };
        // 若页面有预设的参数接收函数，可直接调用
        // handleParams(window.passParams);
      ''');
    },
  ),
);

前端页面（index.html）取值示例：

window.onload = function() {
  const params = window.passParams;
  console.log(params.name); // 输出 foo
  console.log(params.lastname); // 输出 Bar
}

方案2：拼接HTML内容加载（适合参数需要页面初始化时就获取的场景）

先读取assets下的HTML文件内容，把参数提前注入到HTML的JS代码中，再加载拼接后的内容，注意设置baseUrl保证页面内相对路径的静态资源正常加载。
Flutter端代码示例：

// 提前读取assets的HTML内容
String htmlContent = await rootBundle.loadString('assets/index.html');
// 拼接参数注入代码
String injectScript = '''
<script>
window.passParams = {
  name: "foo",
  lastname: "Bar"
};
</script>
''';
// 将注入代码插入到head标签结束前
htmlContent = htmlContent.replaceFirst('</head>', '$injectScript</head>');

return Container(
  child: InAppWebView(
    initialOptions: inAppWebViewGroupOptions,
    initialData: InAppWebViewInitialData(
      data: htmlContent,
      baseUrl: Uri.parse("file:///assets/"), // 必须设置，否则页面内相对路径资源加载失败
    ),
  ),
);

方案3：本地服务中转（适合复杂传参/模拟服务端请求场景）

在APP内启动一个本地轻量HTTP服务，将assets目录映射为服务的静态资源目录，WebView直接请求本地服务的地址，此时可以正常携带query参数，本地服务拿到参数后返回对应内容即可。该方案复杂度较高，非必要不推荐使用。

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