如何在flutter中获取html内容表单flutterWebViewPlugin（webview）
Posted
技术标签:
【中文标题】如何在flutter中获取html内容表单flutterWebViewPlugin（webview）【英文标题】：how to get html content form flutterWebViewPlugin ( webview ) in flutter 【发布时间】：2020-07-17 13:06:24 【问题描述】：我的问题很简单。如何从 webview 中的加载页面获取 html 数据。数据为 JSON 格式。出于某种原因，我不能在这里对任何获取请求使用发布请求，所以我只需要使用 webview 获取数据。如何做到这一点？
flutterWebViewPlugin.onUrlChanged.listen((String url)
if (url.contains('/recon?'))
print('printing url : $url');
// need to get data ( html content ) on this url
flutterWebViewPlugin.close();
Navigator.of(context).pop(url);
);
);
WebviewScaffold(
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:61.0) Gecko/20100101 Firefox/61.0",
url: myurl,
)
【问题讨论】：
这里有任何更新。我仍在寻找解决方案。 【参考方案1】：我的答案是从 url 获取令牌，而不是从 html content 获取令牌，因为我无法正确提取它并得到错误
[VERBOSE-2:ui_dart_state.cc(166)] Unhandled Exception: FormatException: Unexpected character (at character 1)
<html><head></head><body><pre style="word-wrap: break-word; white-space: pr...
^
所以一开始对我有用的是以下解决方案：
WebView(
userAgent: "random",
initialUrl: mainUrl,
onWebViewCreated: (controller)
_controller = controller;
print(_controller.currentUrl());
,
javascriptMode: JavascriptMode.unrestricted,
gestureNavigationEnabled: true,
onPageFinished: (_)
_controller.currentUrl().then(
(url)
if (url.contains("recon?"))
var token = url.split('recon?')[1];
_prefs.setString('token', token);
if (url.contains("dashboard"))
_controller.clearCache();
_controller.loadUrl(mainUrl);
,
);
,
),
在这里，我们获取 url，根据关键字将其拆分，然后存储另一半，即令牌并继续。我能够以flutter_webview_plugin 和flutter_inappwebview 两种方式做到这一点，它的过程相同，但 URL 的东西只对我有用。提取上下文没有，因此它们没有被标记为答案，而是为帮助我理解这种可能性而投了赞成票。
【讨论】：
_controller 是什么？请建议谢谢。
我明白了，_controller 是什么意思。 WebViewController? _controller;
WebView( initialUrl: "$widget.networkURL", javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (controller) _controller = controller; // print(_controller!.currentUrl()); , onPageFinished: (_) _controller!.currentUrl().then((url) if (url.toString().contains('transactionstatus')) String encUtIdData = url.toString().split('transactionstatus/')[1]; Navigator.push( context, MaterialPageRoute( builder: (context) => UsersTransactionDetailScreen( encUtId: encUtIdData, ), ), ); ); , )【参考方案2】：
您可以使用官方 webview 库来做到这一点：
WebView(
initialUrl: model.luxtrustUrl,
onWebViewCreated: (controller)
_controller = controller;
,
javascriptMode: JavascriptMode.unrestricted,
gestureNavigationEnabled: true,
onPageFinished: (_)
readJS();
model.hideProgress();
,
)
void readJS() async
String html = await _controller.evaluateJavascript("window.document.getElementsByTagName('html')[0].outerHTML;");
print(html);
【讨论】：
这对我来说是新的，所以也会尝试这个解决方案并发表评论:) 如何从下面输出数据？<html><head></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">"did":null,"token_type":"Bearer","access_token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIi
如何获取当前页面的url？
我在一个包含视频标签的页面上尝试了这个，它给了我带有空'src'属性的视频标签，有什么帮助吗？
必须是认可答案【参考方案3】：
你可以使用我的插件flutter_inappwebview，这是一个 Flutter 插件，允许你添加内联 WebViews 或打开一个应用内浏览器窗口，并且有很多事件、方法和选项来控制 WebViews。
要获取 HTML 数据，您只需在 onLoadStop 事件中使用 var html = await controller.evaluateJavascript(source: "window.document.getElementsByTagName('html')[0].outerHTML;");。
这是使用您的userAgent 的示例：
import 'dart:async';
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Future main() async
WidgetsFlutterBinding.ensureInitialized();
runApp(new MyApp());
class MyApp extends StatefulWidget
@override
_MyAppState createState() => new _MyAppState();
class _MyAppState extends State<MyApp>
InAppWebViewController webView;
String myurl = "https://github.com/flutter";
@override
void initState()
super.initState();
@override
void dispose()
super.dispose();
@override
Widget build(BuildContext context)
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('InAppWebView Example'),
),
body: Container(
child: Column(children: <Widget>[
Expanded(
child: InAppWebView(
initialUrl: myurl,
initialHeaders: ,
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:61.0) Gecko/20100101 Firefox/61.0"
),
),
onWebViewCreated: (InAppWebViewController controller)
webView = controller;
,
onLoadStart: (InAppWebViewController controller, String url)
,
onLoadStop: (InAppWebViewController controller, String url) async
if (url.contains('/recon?'))
// if JavaScript is enabled, you can use
var html = await controller.evaluateJavascript(
source: "window.document.getElementsByTagName('html')[0].outerHTML;");
log(html);
,
))
])),
),
);
只需将myurl 变量设置为您的网址。
通过window.document.getElementsByTagName('html')[0].outerHTML;，您将获得所有的 HTML 字符串。相反，如果您只需要正文，则可以使用window.document.body.innerText; 进行更改。
【讨论】：
我现在会尝试这个，因为已经厌倦了搜索解决方案。完成其他任务后将更新结果。谢谢。 我爱你的插件。 ***.com/questions/69238180/…以上是关于如何在flutter中获取html内容表单flutterWebViewPlugin（webview）的主要内容，如果未能解决你的问题，请参考以下文章
如何在flutter_svg中使用preCachePicture()