我用Flutter Web创建了一个简单的Web应用程序。我想知道如何在我的Flutter Web应用程序中打开一个外部URL
,无论是在新标签页
中还是在同一标签页
中。例如,我想要打开这个URL:https://stackoverflow.com/questions/ask
我用Flutter Web创建了一个简单的Web应用程序。我想知道如何在我的Flutter Web应用程序中打开一个外部URL
,无论是在新标签页
中还是在同一标签页
中。例如,我想要打开这个URL:https://stackoverflow.com/questions/ask
我觉得你需要这个 - dart:js
可以使 Dart 和 JS 之间实现互操作性:
import 'dart:js' as js;
// ...
FlatButton(
child: Text('Button'),
onPressed: () {
js.context.callMethod('open', ['https://stackoverflow.com/questions/ask']);
},
)
一种简单的方法是创建一个按钮并使用 dart:html
中的 window.open()
方法:
import 'dart:html' as html;
// ...
html.window.open('https://stackoverflow.com/questions/ask', 'new tab');
name
参数 - 我将其设置为 'new tab'
- 是指新标签页的窗口名称,您可以从MDN文档中了解更多相关信息。
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)
}
https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher_web
url_launcher
一直是Android和iOS的解决方案,近期增加了对Web的支持。
webOnlyWindowName:'_self',
的意思是将链接打开在当前窗口而不是新的窗口中。 - PRAJIN PRAKASH然后在您的代码中:
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';
}
}
这里的示例取自包网站
Flutter Web
上似乎不起作用。 - Norbert扩展@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
},
)
open
函数,并且列表中的所有字符串都是传递给该函数的参数,请参见此处。_self
作为第二个参数传递即可。已在此处回答:https://dev59.com/obTma4cB1Zd3GeqP5mEX#56656885
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);
window.top.location.href = '<your url>'
必须导入
import 'dart:html';
现在,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);
}
//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';
}
}
另一种方法:
final Uri _url = Uri.parse('https://flutter.dev');
Future<void> _launchUrl() async {
if (!await launchUrl(_url)) {
throw 'Could not launch $_url';
}
}
开心地使用Flutter吧!!
js.context.callMethod('open', ['$url', isNewTab ? '_blank' : '_self']);
注:其中的 $url 应替换为链接地址。 - Mahesh Jamdade