无法从Flutter中的HTML中删除元素

rt4zxlrg 于 2023-08-07 发布在 Flutter

关注(0)|答案(1)|浏览(188)

我正在遵循Flutter中自定义Web应用程序初始化的指南，我想在Flutter引擎启动时删除加载指示器，但它似乎没有做任何事情。
我们Flutter应用程序启动时什么也没发生，指示器仍然在后台。
下面是我的index.html的简化版本

<!DOCTYPE html>
<html>

<head>
    <!--
      If you are serving your web app in a path other than the root, change the
      href value below to reflect the base path you are serving from.

      The path provided below has to start and end with a slash "/" in order for
      it to work correctly.

      For more details:
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

      This is a placeholder for base href that will be replaced by the value of
      the `--base-href` argument provided to `flutter build`.
-->
    <base href="$FLUTTER_BASE_HREF">
    <title>My App</title>

    <link rel="apple-touch-icon" href="icons/Icon-192.png">
    <link rel="stylesheet" type="text/css" href="styles.css">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="icons/favicon.png" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <title>My App</title>
    <link rel="manifest" href="manifest.json">
</head>

<body class="main">
    <!-- Splash screen loading -->
    <div id="loading">
        <style>
            body {
                inset: 0;
                overflow: hidden;
                margin: 0;
                padding: 0;
                position: fixed;
            }

            #loading {
                align-items: center;
                display: flex;
                height: 100%;
                justify-content: center;
                width: 100%;
            }

            #loading img {
                opacity: 1;
                max-width: 350px;
                margin: 20px;
            }
        </style>
        <img src="icons/splash-icon.png" alt="Loading indicator" />
    </div>
    <script src="main.dart.js" type="application/javascript"></script>
    <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
    <script>
        // Service workers are supported. Use them.
        window.addEventListener('load', function (ev) {
            // Download main.dart.js
            _flutter.loader.loadEntrypoint({
                serviceWorker: {
                    serviceWorkerVersion: serviceWorkerVersion,
                },
                onEntrypointLoaded: async function (engineInitializer) {
                    // Initialize the Flutter engine
                    let appRunner = await engineInitializer.initializeEngine();

                    // Remove the splash screen loading.
                    document.getElementById("loading").remove();

                    // Run the app
                    await appRunner.runApp();
                }
            });
        });
    </script>
</body>

</html>

字符串
我尝试使用不同的选择器，隐藏元素并将其从父元素中删除。

flutter

来源：https://stackoverflow.com/questions/76806517/cannot-remove-element-from-html-in-flutter

1条答案

按热度按时间

zbdgwd5y1#

我能够通过用最新的Flutter版本重新创建我的应用程序的Web支持来修复它。

flutter create . --platforms=web

字符串
然后，我在index.html中添加了“loading”HTML元素，得到了以下文件：

<!DOCTYPE html>
<html>

<head>
    <!--
      If you are serving your web app in a path other than the root, change the
      href value below to reflect the base path you are serving from.

      The path provided below has to start and end with a slash "/" in order for
      it to work correctly.

      For more details:
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

      This is a placeholder for base href that will be replaced by the value of
      the `--base-href` argument provided to `flutter build`.
-->
    <base href="$FLUTTER_BASE_HREF">
    <title>My App</title>

    <link rel="apple-touch-icon" href="icons/Icon-192.png">
    <link rel="stylesheet" type="text/css" href="styles.css">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="icons/favicon.png" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <title>My App</title>
    <link rel="manifest" href="manifest.json">

    <script>
        // The value below is injected by flutter build, do not touch.
        var serviceWorkerVersion = null;
    </script>
    <!-- This script adds the flutter initialization JS code -->
    <script src="flutter.js" defer></script>
</head>

<body class="main">
    <!-- Splash screen loading -->
    <div id="loading">
        <style>
            body {
                inset: 0;
                overflow: hidden;
                margin: 0;
                padding: 0;
                position: fixed;
            }

            #loading {
                align-items: center;
                display: flex;
                height: 100%;
                justify-content: center;
                width: 100%;
            }

            #loading img {
                opacity: 1;
                max-width: 350px;
                margin: 20px;
            }
        </style>
        <img src="icons/splash-icon.png" alt="Loading indicator" />
    </div>

    <script>
        window.addEventListener('load', function (ev) {
            // Download main.dart.js
            _flutter.loader.loadEntrypoint({
                serviceWorker: {
                    serviceWorkerVersion: serviceWorkerVersion,
                },
                onEntrypointLoaded: function (engineInitializer) {
                    // Initialize the Flutter engine
                    engineInitializer.initializeEngine().then(function = (appRunner) {

                        // Remove the "loading" div element, if any.
                        document.getElementById('loading')?.remove();

                        // Run the app
                        appRunner.runApp();
                    });
                }
            });
        });
    </script>
</body>

</html>

型
主要的变化似乎是如何处理serviceWorkerVersion和Flutter初始化。以下脚本未使用日志记录器：

<script src="main.dart.js" type="application/javascript"></script>

型
中的这些脚本替换：

<script>
        // The value below is injected by flutter build, do not touch.
        var serviceWorkerVersion = null;
    </script>
    <!-- This script adds the flutter initialization JS code -->
    <script src="flutter.js" defer></script>

型

赞(0）回复(0）举报 2023-08-07

我来回答

无法从Flutter中的HTML中删除元素

1条答案

相关问题

热门标签

最新问答