如何修复webview_flutter中的白屏？

Question

使用inital_url运行webview_flutter示例应用程序（https://github.com/flutter/plugins/tree/master/packages/webview_flutter/example）：“ https://kreatryx.com ”在Android上，它仅显示带有Zopim聊天栏的白屏在右下角。在iOS上，它运行良好。Android的任何解决方案？

我已经尝试过的方法：1. Flutter通道开发人员2. Flutter通道主设备

Answer 1

如果url您使用的不全是英文或有一些空格字符。您需要像这样对 url 进行编码

 WebView(
      initialUrl: Uri.encodeFull(yourUrl),
      ...
 )

Answer 2

对我来说，我需要通过设置启用 Javascript：

javascriptMode: JavascriptMode.unrestricted

javascriptMode: JavascriptMode.unrestricted

Answer 3

你可以尝试我的插件flutter_inappwebview，这是一个 Flutter 插件，允许你添加内联 WebView 或打开应用内浏览器窗口，并且有很多事件、方法和选项来控制 WebView。

使用您的 URL 的完整示例：

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;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                    initialUrl: "https://kreatryx.com",
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      ),
                      androidInAppWebViewOptions: AndroidInAppWebViewOptions(
                        domStorageEnabled: true,
                        databaseEnabled: true,
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

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

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

它在 Android 和 iOS 平台上都运行良好。这是结果：

Answer 4

感谢这篇文章中的github 问题参考，以下解决方案对我编辑Info.plist 有用：

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key> <true/>
  <key>NSAllowsArbitraryLoadsInWebContent</key> <true/>
</dict>

我刚开始使用Info.plist，不确定<dict>标签是否可以这样嵌套，但显然没问题。

Answer 5

更新

类似于Android Webview：“Uncaught TypeError: Cannot read property 'getItem' of null”

settings.setDomStorageEnabled(true);不见了。

相关问题https://github.com/flutter/flutter/issues/26347

原来的

webview_flutter 目前不会自动重定向。

https://kreatryx.com重定向到https://www.kreatryx.com，插件不遵循该重定向，只显示https://kreatryx.com返回的内容，什么也没有。

关注https://github.com/flutter/flutter/issues/25351