Flutter：从 WebView 加载 IFrame答案

【问题标题】：Flutter: Loading an IFrame from WebViewFlutter：从 WebView 加载 IFrame
【发布时间】：2019-06-25 03:59:18
【问题描述】：

我正在寻找一种从 Flutter WebView ( webview_flutter: ^0.1.2) 加载 iFrame 的方法，但找不到任何相关信息。

                 Container(
                    child: WebView(
                      initialUrl: 'https://www.youtube.com/embed/abc',
                      javaScriptMode: JavaScriptMode.unrestricted,
                    )),

知道如何将 IFrame 传递给 Webview，它会作为 initialUrl 的一部分吗？我也尝试过，但加载不正确。

【问题讨论】：

标签： android webview flutter

【解决方案1】：

这可能会做你想做的事

 Container(
    child: WebView(
      initialUrl: Uri.dataFromString('<html><body><iframe src="https://www.youtube.com/embed/abc"></iframe></body></html>', mimeType: 'text/html').toString(),
      javascriptMode: JavascriptMode.unrestricted,
    )),

这会传递一个包含带有 iframe 的 HTML 页面的数据 URL。

【讨论】：

抱歉，不知道，接下来几天也没有时间仔细查看。
这就是我所说的Gamer move
你们想出来了吗？你使用什么链接格式？我尝试将 embeded/ 交换为 watch?v?= 但出现了一个大的 youtube 栏。并嵌入全屏按钮，质量和速度设置也不会显示。它没有显示广告，为什么？
这种方法有一些限制。我不记得细节了。可能与 CORS 相关。使用不同的方法可能会更好，因为在您的 Flutter 应用程序中的 Dart 中实现一个简单的代理，您可以在其中提供一个端口并转发所有请求并将http://localhost:1234 传递给 webview，其中1234 是您正在服务的端口。我手头没有相关代码。
我完全听不懂你说的对不起哈哈，端口是什么意思？我想要的只是显示 youtube 视频。就像 youtube 应用一样

【解决方案2】：

基于上面的@Günter，我做了一些细微的调整，因为我无法让它在 ios 上运行。这是基于 webview_flutter 官方 pub.dev 页面。

String html = """<!DOCTYPE html>
          <html>
            <head>
            <style>
            body {
              overflow: hidden; 
            }
        .embed-youtube {
            position: relative;
            padding-bottom: 56.25%; 
            padding-top: 0px;
            height: 0;
            overflow: hidden;
        }

        .embed-youtube iframe,
        .embed-youtube object,
        .embed-youtube embed {
            border: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        </style>

        <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
           </head>
          <body bgcolor="#121212">                                    
        <div class="embed-youtube">
         <iframe
          id="vjs_video_3_Youtube_api"
          style="width:100%;height:100%;top:0;left:0;position:absolute;"
          class="vjs-tech holds-the-iframe"
          frameborder="0"
          allowfullscreen="1"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          webkitallowfullscreen mozallowfullscreen allowfullscreen
          title="Live Tv"
          frameborder="0"
          src="$iframeUrl"
          ></iframe></div>
          </body>                                    
        </html>
  """;
final Completer<WebViewController> _controller =
    Completer<WebViewController>();
final String contentBase64 =
    base64Encode(const Utf8Encoder().convert(html));
return WebView(
  initialUrl: 'data:text/html;base64,$contentBase64',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController webViewController) {
    _controller.complete(webViewController);
  },
  onPageStarted: (String url) {
    print('Page started loading: $url');
  },
  onPageFinished: (String url) {
    print('Page finished loading: $url');
  },
  gestureNavigationEnabled: true,
);

然后我使用@Lorenzo Pichilli 回答在 android 上执行此操作。我工作得快一点。希望这对任何人都有帮助。花了我一整天。

附言

这让我可以在 Android 和 iOS 上播放 youtube 和 vimeo 视频。到目前为止工作正常

编辑：

要在 webview 完成加载之前添加加载器，请查看question，了解如何添加进度循环指示器

【讨论】：