在flutter web中使用WebView而不使用iframe

Question

有没有办法在 Web Filter 中使用 WebView 而无需 iframe？大多数网站都可以通过 iframe 的方式显示网站信息，而且很多网站也禁止使用 iframe。

我正在寻找一种直接使用网站信息而不需要 iframe 的方法

我也测试了较低的库，但它不起作用

easy_web_view2

简易网页视图

网页视图x

网页浏览器

在应用程序网络视图中

和 ...

我在 Flutter web 中显示 webview 时没有问题我在显示已禁用 iFrame 功能的网站时遇到问题。

Answer 1

flutter web 直接不支持任何 web 视图加载 url。您必须使用HtmlElementView加载 URL。

import 'dart:ui' as ui;

@override
  void initState() {
    super.initState();
    
    ui.platformViewRegistry.registerViewFactory('openstreetmap', (int viewId) {
      return IFrameElement()
        ..style.width = '100%'
        ..style.height = '100%'
        ..src = 'https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik
'
        ..style.border = 'none';
    });
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(viewType: 'openstreetmap');
  }

Answer 2

使用webview_flutter: ^2.0.13（或最新版本）

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

class WebviewScreen extends StatelessWidget {
  const WebviewScreen({Key? key, required this.url}) : super(key: key);
  final String url;

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: WebView(
        initialUrl: 'http://www.chartsaz.com/',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

在 AndroidManifest 文件中将 useCleartextTraffic 属性设置为 true，如下所示。

<application
....
android:usesCleartextTraffic="true"
....>