Flutter跨域下flutter_inappwebview向JS传参的跨平台方案问询

方案1：使用JavaScript Handler双向通信（推荐） #

这是flutter_inappwebview官方支持的全平台通信方案，Web平台通过postMessage实现，避开同源策略限制，兼容性拉满。

实现步骤 #

Flutter端注册Handler（让JS主动获取数据）

webViewController.addJavaScriptHandler(
  handlerName: 'getCmpData',
  callback: (args) {
    // 返回需要传递给JS的数据
    return {'userId': '123', 'preferences': {'ads': true}};
  },
);

JS端调用Handler并触发目标函数

window.addEventListener('load', async () => {
  // 调用Flutter注册的Handler获取数据
  const cmpData = await window.flutter_inappwebview.callHandler('getCmpData');
  // 触发你的receivecmpdata函数
  receivecmpdata(cmpData);
});

（可选）Flutter主动触发JS函数

如果需要Flutter主动推送数据，可让JS先注册接收Handler：
JS端：

window.flutter_inappwebview.addHandler('receiveCmpData', (dataStr) => {
  const cmpData = JSON.parse(dataStr);
  receivecmpdata(cmpData);
  return Promise.resolve(true);
});

Flutter端：

final yourData = {'key': 'value'};
await webViewController.callAsyncJavaScript(
  functionBody: '''
    window.flutter_inappwebview.callHandler('receiveCmpData', JSON.stringify(${jsonEncode(yourData)}));
  ''',
);

方案2：通过URL参数传递数据 #

适合数据量较小的场景，直接把数据编码后拼在加载URL的查询参数中，JS解析后调用目标函数。

实现步骤 #

Flutter端构造带参数的URL

import 'dart:convert';

// 把数据转成JSON并编码，避免特殊字符问题
final encodedData = Uri.encodeComponent(jsonEncode({'key': 'value'}));
final targetUrl = Uri.parse('http://your-html-page.com?cmpData=$encodedData');
webViewController.loadUrl(urlRequest: URLRequest(url: targetUrl));

JS端解析URL参数并触发函数

window.addEventListener('load', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const cmpDataStr = urlParams.get('cmpData');
  if (cmpDataStr) {
    const cmpData = JSON.parse(decodeURIComponent(cmpDataStr));
    receivecmpdata(cmpData);
  }
});

方案3：注入UserScript初始化数据 #

直接在页面加载阶段注入包含数据的JS代码，无需跨域通信，全平台支持。

实现步骤 #

Flutter端注入UserScript

import 'dart:convert';

final userScript = UserScript(
  source: '''
    window.addEventListener('DOMContentLoaded', () => {
      // 直接将数据注入到JS环境
      const cmpData = ${jsonEncode({'key': 'value'})};
      receivecmpdata(cmpData);
    });
  ''',
  // 确保在DOM加载完成后注入
  injectionTime: InjectionTime.DOM_CONTENT_LOADED,
);
webViewController.addUserScript(userScript);

// 加载目标HTML页面
webViewController.loadUrl(urlRequest: URLRequest(url: Uri.parse('http://your-html-page.com')));

原方案失效原因说明 #

• evaluateJavascript在Web平台无效：Web平台下flutter_inappwebview基于iframe实现，跨域场景下调用该方法会被浏览器同源策略拦截，而Windows平台WebView无此限制。
• Cookie传递出现跨域错误：浏览器同源策略禁止不同域页面访问Cookie，同时第三方资源请求（如Kaspersky的接口）未配置CORS头，被浏览器安全机制拦截。

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