Flutter：在没有 dart:html 的情况下使用 JavaScript 生成的内容抓取网站答案

【问题标题】：Flutter: Scraping a site with JavaScript generated content without dart:htmlFlutter：在没有 dart:html 的情况下使用 JavaScript 生成的内容抓取网站
【发布时间】：2017-11-25 02:13:02
【问题描述】：

如何抓取使用 JavaScript 元素生成部分内容的网页？这是我的壁球俱乐部的本地法庭预订网站，据我所知，这是它调用来检索法庭预订的 JavaScript 脚本：

function load_js(url) {
    var e = document.createElement("script");
    e.src = url;
    e.type = "text/javascript";
    if (document.getElementsByTagName("head")[0].lastChild.src == e.src) {
        document.getElementsByTagName("head")[0].replaceChild(e, document.getElementsByTagName("head")[0].lastChild);
    }
    else {
        document.getElementsByTagName("head")[0].appendChild(e);
    }
}

onload = function () {
    setInterval("load_js('/js/bookings_reload.js.php')", 30000);
};

如何在 Flutter 中复制它？我可以抓取 HTML 并对其进行解析以创建 HTML 文档，但由于 Flutter 不允许使用 dart:html 库，因此我无法创建 ScriptElement 来复制 JavaScript 脚本。 Flutter 中是否有替代方案？

到目前为止，这是我的 Dart 函数：

var httpClient = createHttpClient();
getData() async {
      // Send POST request to get authorized cookie
      var response = await httpClient.post('http://bookings.squashgym.co.nz/login',
          body: {'username': username, 'password': password});

      // Send get request with authenticated cookie to get bookings
      var courts = await httpClient.get('http://bookings.squashgym.co.nz/booking-sheet',
      headers: {'cookie': response.headers['set-cookie']});

      Document data = parse(courts.body);
      httpClient.close();
}

谢谢！

【问题讨论】：

使用 WebView 可能会有更好的运气。我没有这方面的代码，所以我不能留下答案，但你可以打开一个“不可见”的 webview，要求它加载 URL，等到你对页面呈现感到满意，然后从 WebView 中获取 DOM。
pub.dartlang.org/packages/http可以导入http吗？将“包：http/http.dart”导入为 http；

标签： dart flutter

【解决方案1】：

我同意使用 WebView 加载所需的 URL。这是使用webview_flutter 的WebView 示例实现。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: WebView(
        initialUrl: "https://flutter.dev/",
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

这就是它的样子：

当页面被渲染时，您将能够从 WebView 获取 DOM。还有一个从 WebView 获取 DOM 的可用示例。检查它here。

【讨论】：