如何使用 flutter 渲染本地 HTML 文件 dart webview

Question

我想使用 flutter 和 dart 在 webview 中渲染存储在我手机 memory 中的本地 HTML 文件。

Answer 1

我正在使用 Flutter 团队的webview_flutter插件。

脚步

1. 将依赖项添加到pubspec.yaml ：

    dependencies: webview_flutter: ^0.3.20+2

2. 在assets文件夹中放置一个 html 文件（请参阅this ）。 我称之为help.html 。

3. 获取代码中的 html 字符串并将其添加到 webview。

    import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:webview_flutter/webview_flutter.dart'; class HelpScreen extends StatefulWidget { @override HelpScreenState createState() { return HelpScreenState(); } } class HelpScreenState extends State<HelpScreen> { WebViewController _controller; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Help')), body: WebView( initialUrl: 'about:blank', onWebViewCreated: (WebViewController webViewController) { _controller = webViewController; _loadHtmlFromAssets(); }, ), ); } _loadHtmlFromAssets() async { String fileText = await rootBundle.loadString('assets/help.html'); _controller.loadUrl( Uri.dataFromString( fileText, mimeType: 'text/html', encoding: Encoding.getByName('utf-8') ).toString()); } }

笔记：

• 我需要将编码设置为 UTF-8，因为我遇到了非 ASCII 字符的崩溃。
• 在 iOS 中，您需要在Info.plist文件中将键io.flutter.embedded_views_preview添加为true 。 检查文档以获取有关此要求的任何更新。

也可以看看

• Flutter 中 WebView 的强大功能

Answer 2

您可以传递数据 URI

Uri.dataFromString('<html><body>hello world</body></html>', mimeType: 'text/html').toString()

或者你可以在 Flutter 中启动一个 Web 服务器，并传递一个指向服务器提供文件的 IP/端口的 URL。

另请参阅https://github.com/fluttercommunity/flutter_webview_plugin/issues/23中的讨论

有关如何从资产加载字符串，请参阅https://flutter.io/docs/development/ui/assets-and-images#loading-text-assets 。

有关如何读取其他文件的信息，请参阅https://flutter.io/docs/cookbook/persistence/reading-writing-files 。

Answer 3

@Suragch，您的代码在您发布时不起作用，它说localUrl在null上被调用。 _loadHtmlFromAssets需要在分配控制器后调用：

onWebViewCreated: (WebViewController webViewController) {
  _controller = webViewController;
  _loadHtmlFromAssets();
}

然后它工作正常:)

Answer 4

您可以使用Flutter InAppWebView 插件。 它将在应用程序内创建一个本地服务器，并在 WebView 中运行 HTML 应用程序。 启动你的服务器：

InAppLocalhostServer localhostServer = new InAppLocalhostServer();

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await localhostServer.start();
  runApp(new MyApp());
}

//... ...

class _MyHomePageState extends State < MyHomePage > {

//... ...

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

然后在 WebView 中指向您的 localhost html 索引文件。

InAppWebView(
  initialUrlRequest: URLRequest(
          url: Uri.parse('http://localhost:8080/assets/index.html')),
),

在许多情况下，它对许多人不起作用，因为他们忘记将所有文件夹添加为pubspec.yaml文件中的资产。 例如，您需要指定所有文件夹和索引文件，如下所示：

  assets:
    - assets/index.html
    - assets/css/
    - assets/images/
    - assets/js/
    - assets/others/

您可以查看本教程以获取更多详细信息。

Answer 5

我也有同样的问题; 这就是我解决它的方法。

1. 将 webview_flutter 添加到您的项目依赖项中：

   webview_flutter: 0.3.14+1

2. 在您的屏幕/有状态小部件中创建一个 WebViewController

   WebViewController _controller;

3. 使用 onWebViewCreated 属性实现 WebView 并为 _controller 分配一个值。 加载 HTML 文件。

    WebView(
        initialUrl: '',
        onWebViewCreated: (WebViewController webViewController) async {
          _controller = webViewController;
          await loadHtmlFromAssets('legal/privacy_policy.html', _controller);
        },
      )

4. 实现从资产文件夹加载文件的功能

    Future<void> loadHtmlFromAssets(String filename, controller) async {
        String fileText = await rootBundle.loadString(filename);
        controller.loadUrl(Uri.dataFromString(fileText, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());
    }

Answer 6

你可以使用我的插件flutter_inappwebview ，与其他插件相比，它有很多事件、方法和选项！

要从 assets 文件夹加载 html 文件，您需要在使用前在pubspec.yaml文件中声明它（ 在此处查看更多信息）。

pubspec.yaml文件示例：

...

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  assets:
    - assets/index.html

...

之后，您可以简单地使用InAppWebView小部件的initialFile参数将index.html加载到 WebView 中：

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  runApp(new 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(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                    initialFile: "assets/index.html",
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

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

                    },
                  ),
                ),
              ),
            ]))
    );
  }
}

Answer 7

解压apk包，找到原因：路径错误；

对于安卓：

"assets/test.html" == "file:///android_asset/flutter_assets/assets/test.html"

所以，就像这样：

WebView(
    initialUrl: "file:///android_asset/flutter_assets/assets/test.html",
    javascriptMode: JavascriptMode.unrestricted,
  )

你可以加载“assets/test.html”。

Answer 8

使用flutter_widget_from_html_core---->

链接-> https://pub.dev/packages/flutter_widget_from_html_core

dependencies:
  flutter_widget_from_html_core: ^0.5.1+4
    

像这样的代码

HtmlWidget(
     """
               <html lang="en">
                <body>hello world</body>
               </html>
          """,
    ),

Answer 9

asset_webview插件是专门为此设计的。 功能比其他插件少，但使用简单。

Answer 10

你可以用这个获取页面html

var htmlCode = await controller.getHtml();
var document = parse(htmlCode);

你还需要 html 包

Answer 11

终于找到了正确的方法

    String webview_content = '''
     <!DOCTYPE html>
     <html lang="en">
     <head>
     <title>Load file or HTML string example</title>
     </head>
     <body>

     <h1>Local demo page</h1>
     <p>
      This is an example page used to demonstrate how to load a local file 
      or 
      HTML 
      string using the <a 
      href="https://pub.dev/packages/webview_flutter">Flutter 
      webview</a> plugin.
     </p>

    </body>
    </html>
    ''';

   final Completer<WebViewController> _controller =
        Completer<WebViewController>();

    Future<void> _loadHtmlString(
        Completer<WebViewController> controller, BuildContext context) async {
      WebViewController _controller = await controller.future;
      await _controller.loadHtmlString(webview_content);

    return WebView(
     initialUrl: 'https://flutter.dev',
     onWebViewCreated:
     (WebViewController webViewController) async {
     _controller.complete(webViewController);
     _loadHtmlString(_controller, context);
},
),

Answer 12

我按照@Suragch 的回答，发现无法加载 html 文件中的本地图像路径。 所以我尝试了几种方法，发现将方法loadUrl()替换为loadFlutterAsset()实际上可以完成这项工作（代码也更简单）。

class UserGuidePage extends StatefulWidget {
  final UserGuideArguments arguments;

  const UserGuidePage({required this.arguments, Key? key}) : super(key: key);

  @override
  State<UserGuidePage> createState() => _UserGuidePageState();
}

class _UserGuidePageState extends State<UserGuidePage> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'about:blank',
      onWebViewCreated: (WebViewController webViewController) {
      _controller = webViewController;
      _loadHtmlFromAssets();
    },
   );
  }

  void _loadHtmlFromAssets() {
    _controller.loadFlutterAsset('assets/index.html');
  }
}

Answer 13

您可以获取页面 html 并使用它来加载页面，下面的代码是一个示例

    import 'dart:convert';

import 'package:aws_bot/Utils/Const.dart';
import 'package:aws_bot/Utils/User.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:html/parser.dart';

class signIn extends StatefulWidget {
  const signIn({Key? key}) : super(key: key);

  @override
  _signInState createState() => _signInState();
}

class _signInState extends State<signIn> {
  String userEmail = "";
  String userPassword = "";
  final flutterWebviewPlugin = new FlutterWebviewPlugin();
  bool evalJsOnce = false;
  String _currentUrl = "";

  User _user = User();
  bool _loading = true;
  double progress = 0.0;

  @override
  void initState() {
    super.initState();
    // Future.delayed(Duration(microseconds: 3), () async {
    //   Map info = await _user.getEmailPassword();
    //   _user.userEmail = info['email'];
    //   _user.userPassword = info['password'];
    //   setState(() {});
    // });
  }

  @override
  Widget build(BuildContext context) {
    flutterWebviewPlugin.onProgressChanged.listen((double progress) {
      print("progress changed = $progress");
      if (progress == 1.0) {
        //https://portal.aws.amazon.com/billing/signup
        flutterWebviewPlugin.onUrlChanged.listen((String url) {
          _currentUrl = url;
          print("url changed = $url");
          if (url.contains('https://portal.aws.amazon.com/billing/signup')) {
            print("signup");
            flutterWebviewPlugin.evalJavascript(''
                'document.querySelector("#CredentialCollection").addEventListener("submit", function(e) {window.Mchannel.postMessage(JSON.stringify({"email": document.querySelector("#awsui-input-0").value, "password": document.querySelector("#awsui-input-1").value, "confirmPass": document.querySelector("#awsui-input-2").value, "accountName": document.querySelector("#awsui-input-3").value}));});');
          } else {
            flutterWebviewPlugin.evalJavascript(''
                'let pageHtml = document.documentElement.innerHTML;'
                'window.Emailchannel.postMessage(pageHtml);'
                'if (pageHtml.includes("Root user email address")) {'
                'document.querySelector("#next_button").addEventListener("click", function(e) {window.Emailchannel.postMessage(JSON.stringify({"email": document.querySelector("#resolving_input").value}));});}'
                '');
          }
          // } else if (url.contains(
          //     'https://signin.aws.amazon.com/signin?redirect_uri=https%3A%2F%2Fconsole.aws.amazon.com%2Fconsole%2Fhome%3Ffromtb%3Dtrue%26hashArgs%3D%2523%26isauthcode%3Dtrue%26state%3DhashArgsFromTB_us-east-1_2b2a9061808657b8&client_id=arn%3Aaws%3Asignin%3A%3A%3Aconsole%2Fcanvas&forceMobileApp=0&code_challenge=-HEkj8kWzXDv2qBLcBQX2GYULvcP2gsHr0p0X_fJJcU&code_challenge_method=SHA-256')) {
          //   flutterWebviewPlugin.evalJavascript(''
          //       'document.querySelector("#next_button").addEventListener("click", function(e) {e.preventDefault(); window.Emailchannel.postMessage(JSON.stringify({"email": document.querySelector("#resolving_input").value}));});;');
          // } else if (url.contains(
          //     "https://signin.aws.amazon.com/signin?redirect_uri=https%3A%2F%2Fconsole.aws.amazon.com%2Fconsole%2Fhome%3Ffromtb%3Dtrue%26hashArgs%3D%2523%26isauthcode%3Dtrue%26state%3DhashArgsFromTB_us-east-1_c885b81ed0514ab4&client_id=arn%3Aaws%3Asignin%3A%3A%3Aconsole%2Fcanvas&forceMobileApp=0&code_challenge=_Tqr3pEXTDAqOYjWp0ehE6ToYYSN7OLeyJWBx5HTPVM&code_challenge_method=SHA-256")) {
          //   print("enter pass");
          //   // flutterWebviewPlugin.evalJavascript(''
          //   //     'document.querySelector("#signin_button").addEventListener("click", function(e) {e.preventDefault(); window.Passwordchannel.postMessage(JSON.stringify({"password": document.querySelector("#password").value}));});;');
          // } else if (url.contains("https://console.aws.amazon.com/")) {
          //   // flutterWebviewPlugin.launch(_consts.successDirectUrl +
          //   //     "email=${_user.userEmail}&password=${_user.userPassword}");
          // }
        });
      }
    });

    flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) {
      print("state changed = $state");
    });

    return Scaffold(
      appBar: AppBar(
        title: Text(
          'AWS Sign In',
          style: TextStyle(color: Colors.black),
        ),
        backgroundColor: Colors.yellow[600],
      ),
      floatingActionButton: _backButton(context),
      body: Column(
        children: [
          (progress != 1.0)
              ? LinearProgressIndicator(
                  // minHeight: 10.0,
                  value: progress,
                  backgroundColor: Colors.redAccent,
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.black))
              : Container(),
          Container(
              color: Colors.yellow[600],
              width: double.infinity,
              padding: EdgeInsets.all(8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Email Address of you AWS : ${consts.user.userEmail}",
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  SizedBox(
                    height: 4.0,
                  ),
                  Text(
                    "IAM user name : ${consts.user.accountName}",
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  SizedBox(
                    height: 4.0,
                  ),
                  Text(
                    "Password : ${consts.user.userPassword != "null" && consts.user.userPassword != "" ? consts.user.userPassword.replaceAll(consts.user.userPassword, "******") : ""}",
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ],
              )),
          Expanded(child: _buildSignInPage()),
        ],
      ),
    );
  }

  _buildSignInPage() {
    String _url = "https://console.aws.amazon.com/iam/home#/users";
    return InAppWebView(
      initialUrlRequest: URLRequest(url: Uri.parse(_url)),
      // javascriptChannels: Set.from([
      //   JavascriptChannel(
      //       name: 'Emailchannel',
      //       onMessageReceived: (JavascriptMessage message) {
      //         //This is where you receive message from
      //         //javascript code and handle in Flutter/Dart
      //         //like here, the message is just being printed
      //         //in Run/LogCat window of android studio
      //         print("console message = ${message.message}");
      //         setState(() {
      //           _user.userEmail =
      //               jsonDecode(message.message)['email'].toString();
      //         });
      //       }),
      //   JavascriptChannel(
      //       name: 'Passwordchannel',
      //       onMessageReceived: (JavascriptMessage message) {
      //         //This is where you receive message from
      //         //javascript code and handle in Flutter/Dart
      //         //like here, the message is just being printed
      //         //in Run/LogCat window of android studio
      //         print("console message = ${jsonDecode(message.message)}");
      //         setState(() {
      //           _user.userEmail =
      //               jsonDecode(message.message)['password'].toString();
      //         });
      //       })
      // ]),
      // withJavascript: true,
      onConsoleMessage: (controller, consoleMessage) async {
        print("console message = ${consoleMessage.message}");
        print(consoleMessage.messageLevel.toString());
        // LOG ERROR => message levels
        if (consoleMessage.messageLevel.toString() != "ERROR" &&
            consoleMessage.messageLevel.toString() != "WARNING") {
          Map message = jsonDecode(consoleMessage.message);
          if (message.containsKey("email")) {
            consts.user.userEmail = message['email'].toString();
            await consts.user.storeSignUpInfo(email: consts.user.userEmail);
          } else if (message.containsKey("password")) {
            consts.user.userPassword = message['password'].toString();
            await consts.user
                .storeSignUpInfo(password: consts.user.userPassword);
          } else if (message.containsKey("delete")) {
            Future.delayed(Duration.zero, () async {
              await consts.user.clearStorage();
              consts.user.userEmail = "";
              consts.user.userPassword = "";
            });
          } else if (message.containsKey("sEmail")) {
            consts.user.userEmail = message['sEmail'].toString();
            await consts.user.storeSignUpInfo(email: consts.user.userEmail);
          } else if (message.containsKey("sPassword")) {
            consts.user.userPassword = message["sPassword"].toString();
            await consts.user
                .storeSignUpInfo(password: consts.user.userPassword);
          } else if (message.containsKey("sAccountName")) {
            consts.user.accountName = message["sAccountName"].toString();
            await consts.user
                .storeSignUpInfo(accountName: consts.user.accountName);
          } else if (message.containsKey("sFullName")) {
            consts.user.fullName = message["sFullName"].toString();
            await consts.user.storeSignUpInfo(fullName: consts.user.fullName);
          } else if (message.containsKey("sPhone")) {
            consts.user.phoneNumber = message["sPhone"].toString();
            await consts.user
                .storeSignUpInfo(phoneNumber: consts.user.phoneNumber);
          } else if (message.containsKey("sRegion")) {
            consts.user.region = message["sRegion"].toString();
            await consts.user.storeSignUpInfo(region: consts.user.region);
          } else if (message.containsKey("sAddress")) {
            consts.user.address = message["sAddress"].toString();
            await consts.user.storeSignUpInfo(address: consts.user.address);
          } else if (message.containsKey("sCity")) {
            consts.user.city = message["sCity"].toString();
            await consts.user.storeSignUpInfo(city: consts.user.city);
          } else if (message.containsKey("sState")) {
            consts.user.state = message["sState"].toString();
            await consts.user.storeSignUpInfo(state: consts.user.state);
          } else if (message.containsKey("sPostal")) {
            consts.user.postalCode = message["sPostal"].toString();
            await consts.user
                .storeSignUpInfo(postalCode: consts.user.postalCode);
          } else if (message.containsKey("sOrganize")) {
            consts.user.oraganization = message["sOrganize"].toString();
            await consts.user
                .storeSignUpInfo(organization: consts.user.oraganization);
          }

          setState(() {
            if (consts.user.userPassword != "" &&
                !message.containsKey("delete")) {
              /*Future.delayed(Duration.zero, () async {
                await consts.user.storeEmailAndPassword(
                    consts.user.userEmail, consts.user.userPassword);
                // controller.loadUrl(
                //     urlRequest: URLRequest(
                //         url: Uri.parse(_consts.successDirectUrl +
                //             "email=${_user.userEmail}&password=${_user.userPassword}")));
              });*/
            }
          });
        }
      },
      onWindowFocus: (controller) async {
        var currentUrl = await controller.getUrl();
        final html = await controller.getHtml();
        var document = parse(html);
        if (currentUrl != _currentUrl) {
          Future.delayed(Duration.zero, () async {
            var htmlCode = await controller.getHtml();
            var document = parse(htmlCode);
            var currentUrl = await controller.getUrl();
            print("currentUrl = ${currentUrl}");
            if (document.body!.innerHtml.contains("username@example.com")) {
              print("get email");
              await consts.user.clearStorage();

              // get entered email address
              getUserEmail(controller, document.body!.innerHtml);
            } else if (document.body!.innerHtml.contains("Root user sign in")) {
              print("get pass");
              // get entered password
              getUserPassword(controller, document.body!.innerHtml);
            } else if (currentUrl
                .toString()
                .contains("https://portal.aws.amazon.com/billing/signup")) {
              if (document.body!.innerHtml.contains("AWS account name")) {
                print("sign up");
                // get signUp email
                getSignUpEmail(controller);
                // get signUp password
                getSignUpPassword(controller);
                // get signUp account name
                getSignUpAccountName(controller);
              } else if (document.body!.innerHtml
                  .contains("Contact Information")) {
                // get full name
                getSignUpFullname(controller);
                // get phone number
                getSignUpPhoneNumber(controller);
                // get region
                getSignUpRegion(controller);
                // get address
                getSignUpAddress(controller);
                // get city
                getSignUpCity(controller);
                // get state
                getSignUpState(controller);
                // get postal code
                getSignUpPostalCode(controller);
                // get organization
                getSignUpOrganization(controller);
              }
            }
          });
        }
        _currentUrl = currentUrl.toString();
        //controller.goBack();
      },
      onProgressChanged:
          (InAppWebViewController controller, int progress) async {
        setState(() {
          this.progress = progress / 100;
          print("progress = ${this.progress}");
        });
        if (progress == 100) {
          var currentUrl = await controller.getUrl();

          Future.delayed(Duration(microseconds: 3), () async {
            var htmlCode = await controller.getHtml();
            var document = parse(htmlCode);

            print("currentUrl progress = ${currentUrl.toString()}");
            //print("html = ${document.body!.innerHtml}");
            if (document.body!.innerHtml
                .contains("Email address of your AWS account")) {
              print("get email");
              await consts.user.clearStorage();
              consts.user.userEmail = "";
              consts.user.userPassword = "";
              controller.evaluateJavascript(source: """
                   document.querySelector("#new_account_container").style.display = "none";
            """);
              setState(() {});

              // get entered email address
              getUserEmail(controller, document.body!.innerHtml);
            } else if (document.body!.innerHtml.contains("Root user sign in")) {
              print("get pass");
              // get entered password
              getUserPassword(controller, document.body!.innerHtml);
            } else if (currentUrl
                .toString()
                .contains("https://portal.aws.amazon.com/billing/signup#/")) {
              if (document.body!.innerHtml.contains("AWS account name")) {
                print("sign up progress");
                // get signUp email
                getSignUpEmail(controller);
                // get signUp password
                getSignUpPassword(controller);
                // get signUp account name
                getSignUpAccountName(controller);
              } else if (document.body!.innerHtml
                  .contains("Contact Information")) {
                // get full name
                getSignUpFullname(controller);
                // get phone number
                getSignUpPhoneNumber(controller);
                // get region
                getSignUpRegion(controller);
                // get address
                getSignUpAddress(controller);
                // get city
                getSignUpCity(controller);
                // get state
                getSignUpState(controller);
                // get postal code
                getSignUpPostalCode(controller);
                // get organization
                getSignUpOrganization(controller);
              }
            }
            if (currentUrl.toString() ==
                    "https://console.aws.amazon.com/iam/home#/users" ||
                currentUrl.toString() ==
                    "https://console.aws.amazon.com/iam/home?#/users") {
              print("delete credentials");
              // delete user data if loged out
              deleteCredentials(controller);
            }
          });
        }
      },
    );
  }

  // get user amil
  getUserEmail(InAppWebViewController controller, String html) {
    controller.addJavaScriptHandler(
        handlerName: 'EmailGetter',
        callback: (args) {
          // print arguments coming from the JavaScript side!
          print("email args = $args");
          // return data to the JavaScript side!
          return args;
        });
    controller.evaluateJavascript(source: """
            document.querySelector("#next_button").addEventListener("click", function(ee) {
            window.console.log(JSON.stringify({"email": document.querySelector("#resolving_input").value}));});
            """);
  }

  // getting password
  getUserPassword(InAppWebViewController controller, String html) {
    controller.evaluateJavascript(source: """
            document.querySelector("#signin_button").addEventListener("click", function(ee) {
            window.console.log(JSON.stringify({"password": document.querySelector("#password").value}));});
            """);
  }

  // getting SignUp Email address
  getSignUpEmail(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#CredentialCollection").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sEmail": document.querySelector("input[name='email']").value}));});
            """);
  }

  // getting SignUp password
  getSignUpPassword(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#CredentialCollection").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sPassword": document.querySelector("input[name='password']").value}));});
            """);
  }

  // getting SignUp account name
  getSignUpAccountName(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#CredentialCollection").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sAccountName": document.querySelector("input[name='accountName']").value}));});
            """);
  }

  // getting SignUp fullName
  getSignUpFullname(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sFullName": document.querySelector("input[name='address.fullName']").value}));});
            """);
  }

  // getting SignUp phone number
  getSignUpPhoneNumber(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sPhone": document.querySelector("input[name='address.phoneNumber']").value}));});
            """);
  }

  // getting SignUp region
  getSignUpRegion(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sRegion": document.querySelectorAll(".awsui-select-trigger-label")[1].innerText}));});
            """);
  }

  // getting SignUp address
  getSignUpAddress(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sAddress": document.querySelectorAll("input[name='address.addressLine1']").value}));});
            """);
  }

  // getting SignUp city
  getSignUpCity(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sCity": document.querySelectorAll("input[name='address.city']").value}));});
            """);
  }

  // getting SignUp state
  getSignUpState(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sState": document.querySelectorAll("input[name='address.state']").value}));});
            """);
  }

  // getting SignUp postal code
  getSignUpPostalCode(controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sPostal": document.querySelectorAll("input[name='address.postalCode']").value}));});
            """);
  }

  // getting SignUp organization
  getSignUpOrganization(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sOrganize": document.querySelectorAll("input[name='address.company']").value}));});
            """);
  }

  // deleting user credentials
  deleteCredentials(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#aws-console-logout").addEventListener("click", function(ee) {
            window.console.log(JSON.stringify({"delete": "delete"}));});
            """);
  }

  _backButton(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Navigator.pop(context);
      },
      child: Icon(Icons.arrow_back),
    );
  }
}

Answer 14

这是上面代码的更清晰的代码

import 'dart:convert';

import 'package:aws_bot/Utils/Const.dart';
import 'package:aws_bot/Utils/User.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:html/parser.dart';

class signIn extends StatefulWidget {
  const signIn({Key? key}) : super(key: key);

  @override
  _signInState createState() => _signInState();
}

class _signInState extends State<signIn> {
  String userEmail = "";
  String userPassword = "";
  final flutterWebviewPlugin = new FlutterWebviewPlugin();
  bool evalJsOnce = false;
  String _currentUrl = "";

  User _user = User();
  bool _loading = true;
  double progress = 0.0;

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

  @override
  Widget build(BuildContext context) {
    flutterWebviewPlugin.onProgressChanged.listen((double progress) {
      print("progress changed = $progress");
      if (progress == 1.0) {
        //https://portal.aws.amazon.com/billing/signup
        flutterWebviewPlugin.onUrlChanged.listen((String url) {
          _currentUrl = url;
          print("url changed = $url");
          if (url.contains('https://portal.aws.amazon.com/billing/signup')) {
            print("signup");
            flutterWebviewPlugin.evalJavascript(''
                'document.querySelector("#CredentialCollection").addEventListener("submit", function(e) {window.Mchannel.postMessage(JSON.stringify({"email": document.querySelector("#awsui-input-0").value, "password": document.querySelector("#awsui-input-1").value, "confirmPass": document.querySelector("#awsui-input-2").value, "accountName": document.querySelector("#awsui-input-3").value}));});');
          } else {
            flutterWebviewPlugin.evalJavascript(''
                'let pageHtml = document.documentElement.innerHTML;'
                'window.Emailchannel.postMessage(pageHtml);'
                'if (pageHtml.includes("Root user email address")) {'
                'document.querySelector("#next_button").addEventListener("click", function(e) {window.Emailchannel.postMessage(JSON.stringify({"email": document.querySelector("#resolving_input").value}));});}'
                '');
          }
          redirect_uri=https%3A%2F%2Fconsole.aws.amazon.com%2Fconsole%2Fhome%3Ffromtb%3Dtrue%26hashArgs%3D%2523%26isauthcode%3Dtrue%26state%3DhashArgsFromTB_us-east-1_2b2a9061808657b8&client_id=arn%3Aaws%3Asignin%3A%3A%3Aconsole%2Fcanvas&forceMobileApp=0&code_challenge=-HEkj8kWzXDv2qBLcBQX2GYULvcP2gsHr0p0X_fJJcU&code_challenge_method=SHA-256')) {  'document.querySelector("#next_button").addEventListener("click", function(e) {e.preventDefault(); window.Emailchannel.postMessage(JSON.stringify({"email": document.querySelector("#resolving_input").value}));});;');redirect_uri=https%3A%2F%2Fconsole.aws.amazon.com%2Fconsole%2Fhome%3Ffromtb%3Dtrue%26hashArgs%3D%2523%26isauthcode%3Dtrue%26state%3DhashArgsFromTB_us-east-1_c885b81ed0514ab4&client_id=arn%3Aaws%3Asignin%3A%3A%3Aconsole%2Fcanvas&forceMobileApp=0&code_challenge=_Tqr3pEXTDAqOYjWp0ehE6ToYYSN7OLeyJWBx5HTPVM&code_challenge_method=SHA-256")) {   'document.querySelector("#signin_button").addEventListener("click", function(e) {e.preventDefault(); window.Passwordchannel.postMessage(JSON.stringify({"password": document.querySelector("#password").value}));});;');
        });
      }
    });

    flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) {
      print("state changed = $state");
    });

    return Scaffold(
      appBar: AppBar(
        title: Text(
          'AWS Sign In',
          style: TextStyle(color: Colors.black),
        ),
        backgroundColor: Colors.yellow[600],
      ),
      floatingActionButton: _backButton(context),
      body: Column(
        children: [
          (progress != 1.0)
              ? LinearProgressIndicator(
                  // minHeight: 10.0,
                  value: progress,
                  backgroundColor: Colors.redAccent,
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.black))
              : Container(),
          Container(
              color: Colors.yellow[600],
              width: double.infinity,
              padding: EdgeInsets.all(8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Email Address of you AWS : ${consts.user.userEmail}",
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  SizedBox(
                    height: 4.0,
                  ),
                  Text(
                    "IAM user name : ${consts.user.accountName}",
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  SizedBox(
                    height: 4.0,
                  ),
                  Text(
                    "Password : ${consts.user.userPassword != "null" && consts.user.userPassword != "" ? consts.user.userPassword.replaceAll(consts.user.userPassword, "******") : ""}",
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ],
              )),
          Expanded(child: _buildSignInPage()),
        ],
      ),
    );
  }

  _buildSignInPage() {
    String _url = "https://console.aws.amazon.com/iam/home#/users";
    return InAppWebView(
      initialUrlRequest: URLRequest(url: Uri.parse(_url)),
      onConsoleMessage: (controller, consoleMessage) async {
        print("console message = ${consoleMessage.message}");
        print(consoleMessage.messageLevel.toString());
        // LOG ERROR => message levels
        if (consoleMessage.messageLevel.toString() != "ERROR" &&
            consoleMessage.messageLevel.toString() != "WARNING") {
          Map message = jsonDecode(consoleMessage.message);
          if (message.containsKey("email")) {
            consts.user.userEmail = message['email'].toString();
            await consts.user.storeSignUpInfo(email: consts.user.userEmail);
          } else if (message.containsKey("password")) {
            consts.user.userPassword = message['password'].toString();
            await consts.user
                .storeSignUpInfo(password: consts.user.userPassword);
          } else if (message.containsKey("delete")) {
            Future.delayed(Duration.zero, () async {
              await consts.user.clearStorage();
              consts.user.userEmail = "";
              consts.user.userPassword = "";
            });
          } else if (message.containsKey("sEmail")) {
            consts.user.userEmail = message['sEmail'].toString();
            await consts.user.storeSignUpInfo(email: consts.user.userEmail);
          } else if (message.containsKey("sPassword")) {
            consts.user.userPassword = message["sPassword"].toString();
            await consts.user
                .storeSignUpInfo(password: consts.user.userPassword);
          } else if (message.containsKey("sAccountName")) {
            consts.user.accountName = message["sAccountName"].toString();
            await consts.user
                .storeSignUpInfo(accountName: consts.user.accountName);
          } else if (message.containsKey("sFullName")) {
            consts.user.fullName = message["sFullName"].toString();
            await consts.user.storeSignUpInfo(fullName: consts.user.fullName);
          } else if (message.containsKey("sPhone")) {
            consts.user.phoneNumber = message["sPhone"].toString();
            await consts.user
                .storeSignUpInfo(phoneNumber: consts.user.phoneNumber);
          } else if (message.containsKey("sRegion")) {
            consts.user.region = message["sRegion"].toString();
            await consts.user.storeSignUpInfo(region: consts.user.region);
          } else if (message.containsKey("sAddress")) {
            consts.user.address = message["sAddress"].toString();
            await consts.user.storeSignUpInfo(address: consts.user.address);
          } else if (message.containsKey("sCity")) {
            consts.user.city = message["sCity"].toString();
            await consts.user.storeSignUpInfo(city: consts.user.city);
          } else if (message.containsKey("sState")) {
            consts.user.state = message["sState"].toString();
            await consts.user.storeSignUpInfo(state: consts.user.state);
          } else if (message.containsKey("sPostal")) {
            consts.user.postalCode = message["sPostal"].toString();
            await consts.user
                .storeSignUpInfo(postalCode: consts.user.postalCode);
          } else if (message.containsKey("sOrganize")) {
            consts.user.oraganization = message["sOrganize"].toString();
            await consts.user
                .storeSignUpInfo(organization: consts.user.oraganization);
          }

          setState(() {
            if (consts.user.userPassword != "" &&
                !message.containsKey("delete")) {
            }
          });
        }
      },
      onWindowFocus: (controller) async {
        var currentUrl = await controller.getUrl();
        final html = await controller.getHtml();
        var document = parse(html);
        if (currentUrl != _currentUrl) {
          Future.delayed(Duration.zero, () async {
            var htmlCode = await controller.getHtml();
            var document = parse(htmlCode);
            var currentUrl = await controller.getUrl();
            print("currentUrl = ${currentUrl}");
            if (document.body!.innerHtml.contains("username@example.com")) {
              print("get email");
              await consts.user.clearStorage();

              // get entered email address
              getUserEmail(controller, document.body!.innerHtml);
            } else if (document.body!.innerHtml.contains("Root user sign in")) {
              print("get pass");
              // get entered password
              getUserPassword(controller, document.body!.innerHtml);
            } else if (currentUrl
                .toString()
                .contains("https://portal.aws.amazon.com/billing/signup")) {
              if (document.body!.innerHtml.contains("AWS account name")) {
                print("sign up");
                // get signUp email
                getSignUpEmail(controller);
                // get signUp password
                getSignUpPassword(controller);
                // get signUp account name
                getSignUpAccountName(controller);
              } else if (document.body!.innerHtml
                  .contains("Contact Information")) {
                // get full name
                getSignUpFullname(controller);
                // get phone number
                getSignUpPhoneNumber(controller);
                // get region
                getSignUpRegion(controller);
                // get address
                getSignUpAddress(controller);
                // get city
                getSignUpCity(controller);
                // get state
                getSignUpState(controller);
                // get postal code
                getSignUpPostalCode(controller);
                // get organization
                getSignUpOrganization(controller);
              }
            }
          });
        }
        _currentUrl = currentUrl.toString();
        //controller.goBack();
      },
      onProgressChanged:
          (InAppWebViewController controller, int progress) async {
        setState(() {
          this.progress = progress / 100;
          print("progress = ${this.progress}");
        });
        if (progress == 100) {
          var currentUrl = await controller.getUrl();

          Future.delayed(Duration(microseconds: 3), () async {
            var htmlCode = await controller.getHtml();
            var document = parse(htmlCode);

            print("currentUrl progress = ${currentUrl.toString()}");
            //print("html = ${document.body!.innerHtml}");
            if (document.body!.innerHtml
                .contains("Email address of your AWS account")) {
              print("get email");
              await consts.user.clearStorage();
              consts.user.userEmail = "";
              consts.user.userPassword = "";
              controller.evaluateJavascript(source: """
                   document.querySelector("#new_account_container").style.display = "none";
            """);
              setState(() {});

              // get entered email address
              getUserEmail(controller, document.body!.innerHtml);
            } else if (document.body!.innerHtml.contains("Root user sign in")) {
              print("get pass");
              // get entered password
              getUserPassword(controller, document.body!.innerHtml);
            } else if (currentUrl
                .toString()
                .contains("https://portal.aws.amazon.com/billing/signup#/")) {
              if (document.body!.innerHtml.contains("AWS account name")) {
                print("sign up progress");
                // get signUp email
                getSignUpEmail(controller);
                // get signUp password
                getSignUpPassword(controller);
                // get signUp account name
                getSignUpAccountName(controller);
              } else if (document.body!.innerHtml
                  .contains("Contact Information")) {
                // get full name
                getSignUpFullname(controller);
                // get phone number
                getSignUpPhoneNumber(controller);
                // get region
                getSignUpRegion(controller);
                // get address
                getSignUpAddress(controller);
                // get city
                getSignUpCity(controller);
                // get state
                getSignUpState(controller);
                // get postal code
                getSignUpPostalCode(controller);
                // get organization
                getSignUpOrganization(controller);
              }
            }
            if (currentUrl.toString() ==
                    "https://console.aws.amazon.com/iam/home#/users" ||
                currentUrl.toString() ==
                    "https://console.aws.amazon.com/iam/home?#/users") {
              print("delete credentials");
              // delete user data if loged out
              deleteCredentials(controller);
            }
          });
        }
      },
    );
  }

  // get user amil
  getUserEmail(InAppWebViewController controller, String html) {
    controller.addJavaScriptHandler(
        handlerName: 'EmailGetter',
        callback: (args) {
          // print arguments coming from the JavaScript side!
          print("email args = $args");
          // return data to the JavaScript side!
          return args;
        });
    controller.evaluateJavascript(source: """
            document.querySelector("#next_button").addEventListener("click", function(ee) {
            window.console.log(JSON.stringify({"email": document.querySelector("#resolving_input").value}));});
            """);
  }

  // getting password
  getUserPassword(InAppWebViewController controller, String html) {
    controller.evaluateJavascript(source: """
            document.querySelector("#signin_button").addEventListener("click", function(ee) {
            window.console.log(JSON.stringify({"password": document.querySelector("#password").value}));});
            """);
  }

  // getting SignUp Email address
  getSignUpEmail(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#CredentialCollection").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sEmail": document.querySelector("input[name='email']").value}));});
            """);
  }

  // getting SignUp password
  getSignUpPassword(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#CredentialCollection").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sPassword": document.querySelector("input[name='password']").value}));});
            """);
  }

  // getting SignUp account name
  getSignUpAccountName(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#CredentialCollection").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sAccountName": document.querySelector("input[name='accountName']").value}));});
            """);
  }

  // getting SignUp fullName
  getSignUpFullname(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sFullName": document.querySelector("input[name='address.fullName']").value}));});
            """);
  }

  // getting SignUp phone number
  getSignUpPhoneNumber(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sPhone": document.querySelector("input[name='address.phoneNumber']").value}));});
            """);
  }

  // getting SignUp region
  getSignUpRegion(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sRegion": document.querySelectorAll(".awsui-select-trigger-label")[1].innerText}));});
            """);
  }

  // getting SignUp address
  getSignUpAddress(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sAddress": document.querySelectorAll("input[name='address.addressLine1']").value}));});
            """);
  }

  // getting SignUp city
  getSignUpCity(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sCity": document.querySelectorAll("input[name='address.city']").value}));});
            """);
  }

  // getting SignUp state
  getSignUpState(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sState": document.querySelectorAll("input[name='address.state']").value}));});
            """);
  }

  // getting SignUp postal code
  getSignUpPostalCode(controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sPostal": document.querySelectorAll("input[name='address.postalCode']").value}));});
            """);
  }

  // getting SignUp organization
  getSignUpOrganization(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#ContactInformation").addEventListener("submit", function(ee) {
            window.console.log(JSON.stringify({"sOrganize": document.querySelectorAll("input[name='address.company']").value}));});
            """);
  }

  // deleting user credentials
  deleteCredentials(InAppWebViewController controller) {
    controller.evaluateJavascript(source: """
            document.querySelector("#aws-console-logout").addEventListener("click", function(ee) {
            window.console.log(JSON.stringify({"delete": "delete"}));});
            """);
  }

  _backButton(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Navigator.pop(context);
      },
      child: Icon(Icons.arrow_back),
    );
  }
}

在这段代码中，您还可以看到如何使用 javascript dom 操作和选择以及与网页的交互。