logo标签列表

如何在Flutter Web中打开外部URL，可以在新标签页或同一标签页中打开

dartflutterflutter-web
47

我用Flutter Web创建了一个简单的Web应用程序。我想知道如何在我的Flutter Web应用程序中打开一个外部URL，无论是在新标签页中还是在同一标签页中。例如，我想要打开这个URL：https://stackoverflow.com/questions/ask

10个回答
69

我觉得你需要这个 - dart:js 可以使 Dart 和 JS 之间实现互操作性:

import 'dart:js' as js;

// ...

FlatButton(
  child: Text('Button'),
  onPressed: () {
    js.context.callMethod('open', ['https://stackoverflow.com/questions/ask']);
  },
)
1
lib/pages/home_page.dart:2:8: 错误：未找到：'dart:js' 导入 'dart:js' as js; - Ayush P Gupta
@AyushGupta，你正在使用哪个版本的Flutter来帮助你？ 我试过了，它可以在Flutter v1.12.1上运行，而且是主要渠道。 - Mahesh Jamdade
即使我在主分支上，但现在我猜测url_launcher_web已经可用了，所以可能不需要这个了。但我还没有尝试过。 - Ayush P Gupta
4
以下是如何在新标签页或当前标签页打开链接的方法： js.context.callMethod('open', ['$url', isNewTab ? '_blank' : '_self']); 注：其中的 $url 应替换为链接地址。 - Mahesh Jamdade
@MaheshJamdade，你的URL应该以https://开头。 - Siddy Hacks
24

一种简单的方法是创建一个按钮并使用 dart:html 中的 window.open() 方法：

import 'dart:html' as html;

// ...

html.window.open('https://stackoverflow.com/questions/ask', 'new tab');

name 参数 - 我将其设置为 'new tab' - 是指新标签页的窗口名称，您可以从MDN文档中了解更多相关信息。

如果我也有一个安卓版本，如何防止它失败？ - MappaM
它在移动浏览器上不起作用吗？我依稀记得在模拟器上测试过，但我不确定。 - Philippe Fanaro
是的，条件导入它就是！ - MappaM
1
为了避免在移动设备上失败而不是HTML包，您可以使用universal_html。 - intraector
1
universal_html的window.open不幸无法工作。 - oliverbytes
显示剩余2条评论
16
截至url_launcher: ^6.1.0版本，该插件已经支持webOnlyWindowName属性。您可以在下方声明一个包装函数。
Future<void> launch(String url, {bool isNewTab = true}) async {
    await launchUrl(
      Uri.parse(url),
      webOnlyWindowName: isNewTab ? '_blank' : '_self',
    );
  }

并像这样使用它

onTap:(){
   launch('https://stackoverflow.com/questions/ask', isNewTab: true)
}
13
对不起，它没有说明如何使用。你能给我展示一下代码吗？我添加了import 'package:flutter/url_launcher.dart';，但是它仍然不起作用，也没有示例。 - user3808307
1
您可以在此处找到文档 https://pub.dev/packages/url_launcher - wz366
1
url_launcher 只能在新标签页/新窗口中打开链接。原帖作者最终要求在“同一标签页”中打开链接。 - MappaM
1
面对 Android 11 的问题。 - Mijanur Rahaman
5
@MappaM webOnlyWindowName:'_self', 的意思是将链接打开在当前窗口而不是新的窗口中。 - PRAJIN PRAKASH
7
您可以使用url_launcher插件。

然后在您的代码中：

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher_string.dart';

void main() {
  runApp(Scaffold(
    body: Center(
      child: RaisedButton(
        onPressed: _launchURL,
        child: Text('Show Flutter homepage'),
      ),
    ),
  ));
}

_launchURL() async {
  const url = 'https://flutter.io';
  if (await canLaunchUrlString(url)) {
    await launchUrlString(url);
  } else {
    throw 'Could not launch $url';
  }
}

这里的示例取自包网站

5
我尝试过了，在Flutter Web上似乎不起作用。 - Norbert
2
_launchURL()代码有效。在此仅需按照https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher_web上的说明操作即可。基本上在pubspec.yaml中添加**url_launcher**和**url_launcher_web**的依赖项。例如：`url_launcher: ^5.2.5 url_launcher_web: ^0.1.0` - Rohanthewiz
6

扩展@xuyanjun的回答，当想要从Flutter Web打开外部链接到新标签页时，它很好用。但是如果您想要在当前运行Flutter Web应用程序的同一标签页中打开外部链接到网站。

那么你可以这样做。

import 'dart:js' as js;
// ...

FlatButton(
  child: Text('Button'),
  onPressed: () {
    js.context.callMethod('open', ['https://blup.in/','_self']); //<= find explanation below
  },
)

说明：Flutter中的dart：js包提供了从Flutter调用特定于Web的功能，例如从Flutter调用open函数，并且列表中的所有字符串都是传递给该函数的参数，请参见此处。
因此，如果您想要打开新选项卡，则不需要传递第二个参数，但如果您想在同一选项卡中打开，则将_self作为第二个参数传递即可。
1
这是正确的答案！“标记为已解决”的答案仍然会在新标签页中打开，因此不是对作者问题的完整回答。 - toom
5
1
您可以使用以下代码在相同的标签页中启动URL。
window.top.location.href = '<your url>'

必须导入

import 'dart:html';
0

现在，url_launcher包已经支持Web。

只需将url_launcher_web和url_launcher导入到您的pubspec.yaml中即可。

import 'package:url_launcher/url_launcher.dart';
const String _url = 'https://flutter.dev';

void _launchURL()   {
   launch(_url);
}
0
要启动 URL，您需要导入最新版本的 url_launcher，然后通过以下代码即可启动 URL：
//Launch Github

_launchGithub() async {
const url = 'https://github.com/Pranav2918'; //Paste your URL string here
if (await canLaunchUrlString(url)) {
   await launchUrlString(url);
 } else {
   throw 'Could not launch $url';
  }
}
  • 对于非字符串URL：

另一种方法：

final Uri _url = Uri.parse('https://flutter.dev');
 Future<void> _launchUrl() async {
  if (!await launchUrl(_url)) {
   throw 'Could not launch $_url';
  }
}

开心地使用Flutter吧！！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接