Flutter Web无法正常跳转外部链接问题求助

DevOps 小满

2026-10-5

问题根因

该问题由浏览器原生的路径解析规则触发，与Flutter框架、所使用的跳转API均无关联：当传入的跳转地址未携带http://或https://协议前缀时，浏览器会默认将其判定为当前站点下的相对路径，因此会自动把目标地址拼接在当前站点域名之后，形成错误的跳转路径。

解决方案

核心修正逻辑是给所有跳转的外部地址补全标准协议前缀，你可以根据自己使用的实现方式参考对应写法：

基于dart:html API实现跳转的正确示例：

import 'dart:html' as html;

// 新窗口打开外部链接
html.window.open("https://www.google.com", "_blank");
// 当前页面替换为外部链接
html.window.location.assign("https://www.google.com");

基于url_launcher插件实现跳转的正确示例：
可以额外加一层协议判断逻辑，避免手动补全的遗漏：

import 'package:url_launcher/url_launcher.dart';

Future<void> openExternalLink(String targetUrl) async {
  // 自动识别并补全协议前缀
  String formattedUrl = targetUrl.startsWith(RegExp(r'https?://')) 
      ? targetUrl 
      : 'https://$targetUrl';
  final Uri parsedUri = Uri.parse(formattedUrl);
  if (await canLaunchUrl(parsedUri)) {
    await launchUrl(
      parsedUri,
      // Web平台专用参数，_blank表示新窗口打开，_self表示当前页跳转
      webOnlyWindowName: '_blank',
    );
  }
}

// 调用示例
openExternalLink("www.google.com");