Flutter Webview不适用于Flutter Web

ie3xauqp  于 2023-02-16  发布在  Flutter
关注(0)|答案(3)|浏览(271)

我试图通过URL显示webview中的网页。我尝试过flutter_webview_plugin插件,但当我在浏览器上运行该项目时,它不工作。
在flutter web应用程序中显示网页还有别的方法吗?

vh0rcniy

vh0rcniy1#

flutter_webview_plugin用于在应用程序中嵌入网页。在flutter web中,您应该使用HtmlElementView widget。大多数演示都使用IFrameElement来嵌入网页。您可以检查这个easy_web_view包是否自动处理移动的和Web平台。它在内部根据部署情况自动使用HTMLElementViewWebView
一些示例是可用here

更新以添加onLoad侦听器

IFrameElement iframeElement = IFrameElement()
      ..src = 'url'
      ..style.border = 'none'
      ..onLoad.listen((event) {
        // perform you logic here.
      });

    ui.platformViewRegistry.registerViewFactory(
      'webpage',
      (int viewId) => iframeElement,
    );

    return Directionality(
      textDirection: TextDirection.ltr,
      child: Center(
        child: SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: HtmlElementView(viewType: 'webpage'),
        ),
      ),
    );
mwecs4sa

mwecs4sa2#

如果有人面临加载移动的端的问题,那么就用这个,它在Flutter Android,iOS,Web中工作:-

EasyWebView(
        height: 400,
        width: 1000,
        isHtml: false, // Use Html syntax
        isMarkdown: false, // Use markdown syntax
        convertToWidgets: true,
        src: Uri.dataFromString('<html><body><iframe allow="camera *;microphone *" height="100%" width="100%"'
            ' frameborder="0" src="$url"></iframe></body></html>', mimeType: 'text/html').toString(),
      ),

你们可以使用任何webview加载任何网页在您的网站/应用程序在flutter使用Url在html只需更改src =“$url”:)

42fyovps

42fyovps3#

2023年的答案
flutter_inappwebview包刚刚增加了对web的支持!
您可以在Flutter InappWebView官方文档中阅读网页设置说明,但总结如下:

1.将脚本添加到

<head>
  <!-- ... -->
    <script type="application/javascript" src="/assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>
  <!-- ... -->
</head>

2.使用InAppWebView小部件

Scaffold(
    body: SafeArea(
      child: InAppWebView(
        initialUrlRequest: URLRequest(url:WebUri('https://flutter.dev/')),
       )
    )
);

请注意,在WebView和Flutter网页中可以做的事情有一些限制,但对于简单地显示内容来说,这应该是可行的。

相关问题