Flutter：从 WebView 加载 IFrame

Question

Flutter：从 WebView 加载 IFrame

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

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

Run Code Online (Sandbox Code Playgroud)

知道如何将 IFrame 传递给 Webview，它会作为 initialUrl 的一部分吗？，我已经尝试过相同的方法，但它没有正确加载。

Answer 1

Gün*_*uer 24

这可能会做你想做的

 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,
    )),

Run Code Online (Sandbox Code Playgroud)

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

这就是我所说的玩家移动 (3认同)

Answer 2

Ian*_*amz 5

基于上面的@G\xc3\xbcnter，我做了一些细微的调整，因为我无法让它在ios上工作。这是基于webview_flutter官方 pub.dev 页面。

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n\n

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

\n\n

聚苯乙烯

\n\n

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

\n\n

编辑：

\n\n

要在 webview 完成加载之前添加加载程序，请查看有关如何添加进度循环指示器的问题

\n

归档时间：	7 年前
查看次数：	20768 次
最近记录：	5 年，10 月前