index.html 中缺少 html 元素，除了 elm div - Elm 0.19答案

【问题标题】：Missing html elements in index.html except elm div - Elm 0.19index.html 中缺少 html 元素，除了 elm div - Elm 0.19
【发布时间】：2019-08-23 22:07:10
【问题描述】：

我的索引页面在正文中仅显示“elm”div，而不是 google-sign-in div 和测试 h1，就像我在以下 index.html 中所做的那样。当我使用浏览器工具检查它们时，我没有看到这些元素。

当我注释掉或删除 var app = Elm.Main.init({ node: document.getElementById('elm') }); 时，浏览器会显示 google div 和 h1 元素。

是什么原因，如何解决？

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="google-signin-client_id" content="XXXXX.apps.googleusercontent.com">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script src="https://apis.google.com/js/platform.js" async defer></script>

  <script src="main.js"></script>

</head>

<body>
  <div class="g-signin2" data-onsuccess="onSignIn"></div>
  <br>
  <br>
  <h1>Testing</h1>

  <div id="elm"></div>
  <script>
    function onSignIn(googleUser) {
      var profile = googleUser.getBasicProfile();
      console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
      console.log('Name: ' + profile.getName());
      console.log('Image URL: ' + profile.getImageUrl());
      console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
    }

    var app = Elm.Main.init({
      node: document.getElementById('elm')
    });
  </script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

我的 Elm 程序。

-- MAIN

main : Program () Model Msg
main =
  Browser.application
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    , onUrlChange = UrlChanged
    , onUrlRequest = LinkClicked
    }

我也尝试过改变 elm div <div id="elm" style="width:50%; height:400px;"></div>的风格

榆树 0.19 火狐

【问题讨论】：

标签： elm

【解决方案1】：

如果您想访问 body 和 elm 中的元素，那么我会使用 Browser.element。否则Browser.document 和Browser.application 为您管理body（您当前看到的内容）。

【讨论】：

@PeterS。您的编辑显着改变了原始答案。它被拒绝了。但是，您应该将其发布为该问题的另一个答案。