flutter嵌入web，获取网站的标题和图标

让我啃一口

于 2024-08-30 17:04:41 发布

阅读量196

点赞数 2

文章标签：前端 flutter javascript

本文链接：https://blog.csdn.net/m0_72010625/article/details/141722580

版权

 Stack(
      children: <Widget>[
        _reload
            ? Container()
            : InAppWebViewEIP1193(
                chainId: _chainRpcId,
                rpcUrl: rpcUrl,
                walletAddress: walletAddress,
                onWebViewCreated: (controller) {
                  _webViewController = controller;
                  // 在这里可以安全地使用 _webViewController
                },
                onLoadStop: (controller, url) async {
                  title = await controller.getTitle();
                  String? iconUrl = await _webViewController.evaluateJavascript(
                    source: """
                  (function() {
                    var links = document.getElementsByTagName('link');
                    for (var i = 0; i < links.length; i++) {
                      if (links[i].getAttribute('rel') == 'icon' || links[i].getAttribute('rel') == 'shortcut icon') {
                        return links[i].getAttribute('href');
                      }
                    }
                    return null;
                  })();
                  """,
                  );
                  if (iconUrl != null && iconUrl.startsWith('/')) {
                    iconUrl = iconUrl.substring(1); // 去掉第一个字符
                  }

                  icon = '$url$iconUrl';

                  _webViewController = controller;
                  addRecentCollect();
                  setState(() {});
                },
                onConsoleMessage: (controller, consoleMessage) {
                  print('onConsoleMessage: $consoleMessage');
                },
                onReceivedServerTrustAuthRequest:
                    (controller, challenge) async {
                  return ServerTrustAuthResponse(
                      action: ServerTrustAuthResponseAction.PROCEED);
                },
                onLoadStart: (InAppWebViewController controller, Uri? url) {
                  print("进入URL: $url");
                },
                signCallback: (params, eip1193, controller) {
                 
                },
                onProgressChanged:
                    (InAppWebViewController controller, int progress) {
                  if (progress == 100) {
                    controllerThis = controller;
                  }
                  progressValue = double.parse(progress.toString());

                  if (mounted) {
                    setState(() {});
                  }
                },
                initialUrlRequest: URLRequest(url: Uri.parse(url!)),
              ),
        Offstage(
            child: SizedBox(
              height: adaptation(4),
              child: LinearProgressIndicator(
                  value: progressValue / 100,
                  backgroundColor: Colors.transparent,
                  valueColor: AlwaysStoppedAnimation(Colours.themeColor)),
            ),
            offstage: progressValue == 100),
        // Offstage(child: Center(child: buildLoadingShadeCustom()), offstage: progressValue == 100),
      ],
    );
  }

以上是实现的代码，其实主要就是：

onLoadStop: (controller, url) async {
  // 当WebView加载停止时（页面加载完成时）调用此回调函数
  // `controller` 是 InAppWebViewController 的实例，用于操作 WebView
  // `url` 是当前页面的 URL

  title = await controller.getTitle();
  // 获取当前 WebView 页面的标题，并将其赋值给变量 `title`

  String? iconUrl = await _webViewController.evaluateJavascript(
    source: """
    (function() {
      var links = document.getElementsByTagName('link');
      for (var i = 0; i < links.length; i++) {
        if (links[i].getAttribute('rel') == 'icon' || links[i].getAttribute('rel') == 'shortcut icon') {
          return links[i].getAttribute('href');
        }
      }
      return null;
    })();
    """,
  );
  // 使用 JavaScript 代码在 WebView 中执行操作，寻找页面中的图标链接
  // 通过遍历 `<link>` 标签，查找 `rel` 属性为 `icon` 或 `shortcut icon` 的标签
  // 返回找到的图标链接的 `href` 属性的值，如果没有找到则返回 null

  if (iconUrl != null && iconUrl.startsWith('/')) {
    iconUrl = iconUrl.substring(1); // 去掉第一个字符
    // 如果找到的图标 URL 是以 '/' 开头的，相对路径的 URL，将其第一个字符去掉
  }

  icon = '$url$iconUrl';
  // 将最终的图标 URL 组合成完整的 URL（基于当前页面的 URL），赋值给 `icon` 变量

  _webViewController = controller;
  // 更新 `_webViewController` 为当前的 `controller` 实例，以便后续使用

  addRecentCollect();
  // 调用 `addRecentCollect()` 函数，可能用于将当前页面加入最近收藏列表

  setState(() {});
  // 调用 `setState` 以通知 Flutter 框架，状态已更新，需要重建 UI
},