Flutter Webview - 在浏览器或窗口中打开外部链接

Posted 2023-02-23

【中文标题】Flutter Webview - 在浏览器或窗口中打开外部链接

【英文标题】：Flutter Webview - Opening External Links in Browser or Window

【发布时间】：2021-03-25 06:49:45

【问题描述】：

我有一个使用 Flutter Webview 制作的 android 应用。当用户单击外部链接时，我希望该链接在浏览器中打开。我该怎么做？

事实上，像 Instagram 那样在窗口中打开外部链接会很好。有没有办法做到这一点？

编辑：

website.com 是我应用的主页。那不是外部链接。我想要的是当尝试打开除 website.com 以外的链接时，它会在浏览器或窗口中打开。

首页：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class Forum extends StatefulWidget 
  @override
  _ForumState createState() => _ForumState();



class _ForumState extends State<Forum> 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Forum',
        home: Scaffold(
          body: WebView(initialUrl: "https://website.com",
            javascriptMode: JavascriptMode.unrestricted,
          ),
        )
    );
  

【问题讨论】：

这个问题存在于sample

【参考方案1】：

我遇到了完全相同的问题，我花了很多钱来解决它。 Akif，即使在您提出问题 5 个月后，我也会发布解决方案，因为我相信它仍然会帮助很多人。

下面的解决方案是使用 STANDART FLUTTER WEBVIEW 并同时使用 URL LAUNCHER。

将url_launcher 和webview_flutter 添加到您的文件pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  
  webview_flutter: ^1.0.5
  url_launcher: ^5.7.10

现在在您的网络视图中，它需要包含 navigationDelegate

见下文...

class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        title: 'Title Your App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            body: Container(
          child: WebView(
            initialUrl: 'https://website.com',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) 
              _controller.complete(webViewController);
            ,
            navigationDelegate: (NavigationRequest request) 
              if (request.url.startsWith("https://website.com")) 
                return NavigationDecision.navigate;
               else 
                _launchURL(request.url);
                return NavigationDecision.prevent;
              
            ,
          ),
        )));
  

  _launchURL(String url) async 
    if (await canLaunch(url)) 
      await launch(url);
     else 
      throw 'Could not launch $url';
    
  

别忘了你需要添加 URL LAUNCHER 依赖。

import 'package:url_launcher/url_launcher.dart';

解释：

此代码会导致在 webview 中发出的每个请求都通过以下测试：

如果请求地址以您的 webview 的起始地址开头，它通常会在 webview 中执行。 如果请求地址与您的 webview 的初始地址不同，它会将该请求发送到手机的默认浏览器。

我希望它可能仍然会帮助你，或者从现在开始它会帮助需要它的人。

拥抱。

【参考方案2】：

如果你想在外部浏览器中打开链接，那么试试这个url_launcher

对于打开的浏览器，粘贴您的网址并在点击时调用它，

您也可以检查您的网址是否包含您的网站。之后您可以执行操作，

    onPressed: () 
            var myUrl="https://website.com";
            if(myUrl.contains("website.com"))
              //place your website code
              print("its my website ");
            else
              _launchURL(myUrl);
            
          



  _launchURL(String myUrl) async 
    if (await canLaunch(myUrl))
    
      await launch(myUrl);
     else 
      throw 'Could not launch $myUrl';
    
  

【讨论】：

website.com 是我应用的主页。那不是外部链接。我想要的是当尝试打开 website.com 以外的链接时，它会在浏览器中打开。

再次检查，我用你的网站 url 检查更新我的代码，

【参考方案3】：

您可以使用 flutter_custom_tabs 插件在原生浏览器应用程序（Android 版 Google 和 ios 版 Safari）中打开该链接。

要安装它，您需要在您的pubspec.yaml 中的dependencies: 下方添加以下行：

flutter_custom_tabs: "^0.6.0"

并使用如下函数：

void _launchURL(BuildContext context, String url) async 
    try 
      await launch(
        url,
          extraCustomTabs: <String>[
            'org.mozilla.firefox',
            'com.microsoft.emmx',
          ],        
        ),
      );
     catch (e) 
      debugPrint(e.toString());
    

【参考方案4】：

您可以使用url_launcher 插件来完成这项工作

为此，您需要在 pubspec.yaml 中添加插件

所以在 dependencies 下的 pubspec,yaml 文件中添加 url_launcher: ^5.7.10

这是一个启动网站的示例

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

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


_launchURL() async 
  const url = 'https:website.com';
  if (await canLaunch(url)) 
    await launch(url);
   else 
    throw 'Could not launch $url';
  

【讨论】：

website.com 是我应用的主页。那不是外部链接。我想要的是当尝试打开 website.com 以外的链接时，它会在浏览器中打开。

是的，您可以将website.com 替换为您想在浏览器中打开的任何其他链接

但是，我不知道应该在浏览器中打开的站点链接。

那你要在浏览器中打开什么，请清楚

Webview中显示的站点以外的所有链接