Question

在加载Youtube视频时，我遇到了Flutter Webview错误（webview_flutter：^ 0.1.2）（尽管我最初认为这与内容安全性问题有关），这似乎是HTTPS来源安全的问题。在浏览器上，通常可以通过移至HTTPS域来缓解这种情况，寻找在移动设备上解决此问题的方法

             Container(
                child: WebView(
                         initialUrl: Uri.dataFromString(
                          '<html>'
                            '<meta http-equiv="Content-Security-Policy" content="default-src * gap:; script-src * \'unsafe-inline\' \'unsafe-eval\'; connect-src *; img-src * data: blob: android-webview-video-poster:; style-src * \'unsafe-inline\';">'
//                            '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
                            '<body><iframe src="https://www.youtube.com/embed/vlkNcHDFnGA"></iframe></body>'
                          '</html>', mimeType: 'text/html').toString(),
                      javascriptMode: JavascriptMode.unrestricted,                )),

我在控制台中看到以下内容：https://www.youtube.com/embed/vlkNcHDFnGA%22%3E%3C/iframe%3E%3C/body%3E%3C/html%3E（1）

在不安全的来源上不推荐使用deviceorientation事件，并且支持将在将来删除。你应该考虑切换您的应用程序使用安全来源，例如HTTPS。看到 https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins 有关更多详细信息。

Answer 1

您可以尝试使用我的插件flutter_inappwebview，它是Flutter插件，可让您添加内联WebView或打开应用程序内浏览器窗口，并且具有许多事件，方法和选项来控制WebView。

要在WebView中加载<iframe>，可以使用initialData小部件的InAppWebView参数直接加载HTML源，或从资产文件夹中加载HTML文件（查看更多信息） here），使用initialFile参数。

使用initialData参数和您的youtube链接的完整示例：

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;
  String iframeUrl = "https://www.youtube.com/embed/vlkNcHDFnGA";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                    initialData: InAppWebViewInitialData(
                        data: """
<!DOCTYPE html>
<html>
    <head>
        <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">
        <title>Flutter InAppWebView</title>
    </head>
    <body>
        <iframe src="$iframeUrl" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
    </body>
</html>"""
                    ),
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) {

                    },
                  ),
                ),
              ),
            ]))
    );
  }
}

Flutter：Web视图安全来源

1 个答案: