如何在新选项卡或同一选项卡中的 flutter web 中打开外部网址

Question

我有一个使用 flutter web 创建的简单 Web 应用程序。我想知道如何在我的 flutter web 应用程序中的

external url

或

new tab

中打开新的

the same tab

。说我想打开网址https://stackoverflow.com/questions/ask

Answer 1

我想你想要这个 -

dart:js

实现 Dart 和 JS 之间的互操作性 -:

import 'dart:js' as js;

// ...

FlatButton(
  child: Text('Button'),
  onPressed: () {
    js.context.callMethod('open', ['https://stackoverflow.com/questions/ask']);
  },
)

Answer 2

一种简单的方法是创建一个按钮并使用

dart:html

的

window.open()

方法：

import 'dart:html' as html;

// ...

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

name

参数（我保留为

'new tab'

）指的是新选项卡的窗口名称，您可以从 MDN 的文档了解更多信息。

Answer 3

从

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)
}

Answer 4

https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher_web

url_launcher

一直是android和ios的解决方案，最近它增加了对web的支持。

Answer 5

扩展@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 包提供了调用特定于 Web 的函数的功能，例如 flutter 中的

open

函数，列表中的所有字符串都是传递给函数的参数，请参阅 this。

因此，如果您想打开新选项卡，则不需要传递秒参数，但如果您想在同一个选项卡中打开，则传递

_self

作为第二个参数。

Answer 6

您可以使用 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';
  }
}

取自包装网站的示例

Answer 7

在这里回答https://stackoverflow.com/a/56656885/361832

Flutter Web 尚不支持插件，因此您必须使用

dart:html

中的替代品

https://api.dartlang.org/stable/2.4.0/dart-html/Window/open.html window.open(url, 'tab');

或

https://api.dartlang.org/stable/2.4.0/dart-html/Window/location.html window.location.assign(url);

Answer 8

您可以使用以下代码在同一选项卡中启动 URL。

window.top.location.href = '<your url>'

必须导入

import 'dart:html';

Answer 9

要启动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';
  }
}

快乐飘飘！！

Answer 10

包 url_launcher 现在具有网络支持。

只需将 url_launcher_web 和 url_launcher 导入到您的 pubspec.yaml

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

void _launchURL()   {
   launch(_url);
} 

Answer 11

我发现，如果您从 Flutter 网页版导航到新的浏览器选项卡，然后返回到 Flutter 选项卡本身，则小组件堆栈会刷新。这是不受欢迎的行为。