我在加载 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)
The deviceorientation event is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
最佳答案
你可以试试我的插件flutter_inappwebview ，这是一个 Flutter 插件，允许您添加内联 WebView 或打开应用内浏览器窗口，并且有很多事件、方法和选项来控制 WebView。
加载<iframe>在 WebView 中，您可以使用 initialData 直接加载 HTML 源代码InAppWebView 的参数小部件或使用 initialFile 从 Assets 文件夹加载 HTML 文件(参见更多 here )参数。
使用 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) {
},
),
),
),
]))
);
}
}
关于android - Flutter:Web View 安全来源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54470420/