个人中心
gpt4 book ai didi

flutter - 如何在flutter上打开多个WebView？

转载 作者：行者123 更新时间：2023-12-03 17:29:32 27 4
gpt4 key购买 nike

我有一个简单的 Flutter WebView 应用程序来显示我的网站。
问题是，在我的网站中，我有两个功能可以打开一个新的浏览器窗口。

例如，其中之一是 facebook 登录功能，当用户点击使用 facebook 登录时，它会加载 facebook 登录 api 页面，登录完成后，它告诉用户返回另一个页面，但正如我在 WebView 中，我无法返回另一个页面。

有什么方法可以让我在 Flutter 上打开 2 个 WebView 来加载不同的页面？如果没有，这个问题还有其他可能的解决方案吗？

最佳答案

webview_flutter当新窗口打开时，插件不提供管理和拦截事件，例如当您单击带有 target="_blank" 的链接按钮时。或当 window.open()由 JavaScript 端调用。
所以，你可以使用我的插件 flutter_inappwebview ，这是一个 Flutter 插件，允许您添加内联 WebView 或打开应用程序内浏览器窗口，并且有很多事件、方法和选项来控制 WebView。
它实现了 onCreateWindow事件，这是当 WebView 请求宿主应用程序创建一个新窗口时触发的事件，例如当试图打开一个带有 target="_blank" 的链接时。或当 window.open()由 JavaScript 端调用。
这是一个示例，其中我加载了一个简单的初始 HTML(只是为了示例)，其中有一个按钮 <button id="login-button">LOGIN</button> ，当它被点击时，它会在 AlertDialog 中打开一个新的 WebView .使用这个新的 WebView，您可以通过 onLoadStop 收听 URL 更改。事件或使用 shouldOverrideUrlLoading事件，或者您可以在用户登录后检查并获取特定的 cookie。您可以在这个新的 WebView 中放置任何逻辑。
下面是代码示例:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(initialRoute: '/', routes: {
      '/': (context) => InAppWebViewExampleScreen(),
    });
  }
}

class InAppWebViewExampleScreen extends StatefulWidget {
  @override
  _InAppWebViewExampleScreenState createState() =>
      new _InAppWebViewExampleScreenState();
}

class _InAppWebViewExampleScreenState extends State<InAppWebViewExampleScreen> {
  InAppWebViewController _webViewController;
  CookieManager _cookieManager = CookieManager.instance();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("InAppWebView")),
        body: Container(
            child: Column(children: <Widget>[
          Expanded(
              child: InAppWebView(
            initialData: InAppWebViewInitialData(data: """
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>InAppWebViewInitialDataTest</title>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dolor diam, interdum vitae pellentesque sit amet, scelerisque at magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <p>Nullam vitae fringilla mauris, eu efficitur erat. Nulla aliquam ligula nec leo ornare varius. Curabitur ornare ultrices convallis.</p>
        <button id="login-button">LOGIN</button>
        <script>
          document.querySelector('#login-button').addEventListener('click', function (event) {
            window.open('https://github.com/', '_blank');
          });
        </script>
    </body>
</html>
                    """),
            initialHeaders: {},
            initialOptions: InAppWebViewGroupOptions(
                crossPlatform: InAppWebViewOptions(
                  debuggingEnabled: true,
                ),
                android:
                    AndroidInAppWebViewOptions(supportMultipleWindows: true)),
            onWebViewCreated: (InAppWebViewController controller) {
              _webViewController = controller;
            },
            onLoadStart: (InAppWebViewController controller, String url) {

            },
            onLoadStop: (InAppWebViewController controller, String url) {

            },
            onCreateWindow: (controller, onCreateWindowRequest) {
              showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                      content: Container(
                          width: 700,
                          child: Column(children: <Widget>[
                            Expanded(
                                child: InAppWebView(
                              initialUrl: onCreateWindowRequest.url,
                              initialOptions: InAppWebViewGroupOptions(
                                  crossPlatform: InAppWebViewOptions(
                                      debuggingEnabled: true,
                                      useShouldOverrideUrlLoading: true)),
                              onLoadStart: (InAppWebViewController controller,
                                  String url) {},
                              onLoadStop: (controller, url) async {
                                print(url);
                                if (url == "myURL") {
                                  Navigator.pop(context);
                                  return;
                                }

                                var loggedInCookie = await _cookieManager.getCookie(url: url, name: "logged_in");
                                if (loggedInCookie.value == "yes") {
                                  Navigator.pop(context);
                                  return;
                                }
                              },
                              shouldOverrideUrlLoading: (controller,
                                  shouldOverrideUrlLoadingRequest) async {
                                print(shouldOverrideUrlLoadingRequest.url);
                                if (shouldOverrideUrlLoadingRequest.url == "myURL") {
                                  Navigator.pop(context);
                                }
                                return ShouldOverrideUrlLoadingAction.ALLOW;
                              },
                            ))
                          ])));
                },
              );
            },
          ))
        ])));
  }
}

关于flutter - 如何在flutter上打开多个WebView？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57067046/

27 4 0
文章推荐： python - 将 jupyter notebook 更新到 python 3.7
文章推荐： reactjs - 如何将 React 应用程序置于维护模式？
文章推荐： xslt - 在哪里为共享点列表添加禁用输出转义？
文章推荐： python-3.x - 从 python 2.7 升级到 3.7 时的诗歌和 python 版本错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com