索引中缺少 html 元素.html除了 elm div - Elm 0.19



我的索引页面在正文中仅显示"elm"div,而不是谷歌登录div并测试h1,如我在以下索引中所做的那样.html。 当我使用浏览器工具检查它们时,我没有看到元素。

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

原因是什么,我该如何解决?

<!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>

我的榆树程序。

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

我还尝试更改榆树div 的样式<div id="elm" style="width:50%; height:400px;"></div>

榆树 0.19 火狐

如果您想与 elm 一起访问body中的元素,那么我会使用Browser.element.否则,Browser.documentBrowser.application为您管理body(您当前看到的内容(。

更多信息在这里: https://package.elm-lang.org/packages/elm/browser/latest/Browser#element

最新更新