Javascript 如何在没有按钮的情况下激活吐司_Javascript_Toast_Material Design Lite

Javascript 如何在没有按钮的情况下激活吐司

javascript

Javascript 如何在没有按钮的情况下激活吐司,javascript,toast,material-design-lite,Javascript,Toast,Material Design Lite,我在做材料设计，我在做表格。我希望在数据库中发送表单时，显示一个带有祝酒词的弹出窗口文件：我尝试创建一个类似这样的功能： <script> function test() { var notification = document.querySelector('.mdl-js-snackbar'); console.log(notification); notification.Mater

我在做材料设计，我在做表格。我希望在数据库中发送表单时，显示一个带有祝酒词的弹出窗口

文件：

我尝试创建一个类似这样的功能：

 <script>
        function test() {
            var notification = document.querySelector('.mdl-js-snackbar');
            console.log(notification);
            notification.MaterialSnackbar.showSnackbar(
                {
                    message: 'Image Uploaded'
                }
            );
        }

        test();
 </script>

但同时我可以用控制台调用函数，它工作得很好

我该怎么做才能在加载页面和我错过了什么的时候叫祝酒辞？

谢谢

问题是函数运行时未加载材料

看看这个例子：

<html>
<head>
  <!-- Material Design Lite -->
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
  <button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button>
  <div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button class="mdl-snackbar__action" type="button"></button>
  </div>
</body>
<script>
    r(function(){
        var notification = document.querySelector('.mdl-js-snackbar');
        notification.MaterialSnackbar.showSnackbar(
          {
            message: 'and..working!!'
          }
        );
    });

    function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}


</script>


显示Snackbar
r（函数（）{
var通知=document.querySelector（'.mdl js snackbar'）；
notification.materialsnakbar.showSnackbar(
{
信息：“还有……工作！！”
}
);
});
函数r（f）{/in/.test（document.readyState）？setTimeout（'r（'+f+'），9）：f（）}

问题是函数运行时未加载材料

看看这个例子：

<html>
<head>
  <!-- Material Design Lite -->
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
  <button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button>
  <div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button class="mdl-snackbar__action" type="button"></button>
  </div>
</body>
<script>
    r(function(){
        var notification = document.querySelector('.mdl-js-snackbar');
        notification.MaterialSnackbar.showSnackbar(
          {
            message: 'and..working!!'
          }
        );
    });

    function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}


</script>


显示Snackbar
r（函数（）{
var通知=document.querySelector（'.mdl js snackbar'）；
notification.materialsnakbar.showSnackbar(
{
信息：“还有……工作！！”
}
);
});
函数r（f）{/in/.test（document.readyState）？setTimeout（'r（'+f+'），9）：f（）}

找到了这个。如果使用Material Design Lite v1.0.6，则SnackBar不在该版本中。另一个问题可能是“材料尚未加载或绑定到元素。如果您设置超时，那么它将工作。”找到此问题。如果使用Material Design Lite v1.0.6，则SnackBar不在该版本中。另一个问题可能是“材料尚未加载或绑定到元素。如果您设置超时，则它将正常工作。”

<html>
<head>
  <!-- Material Design Lite -->
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
  <button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button>
  <div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button class="mdl-snackbar__action" type="button"></button>
  </div>
</body>
<script>
    r(function(){
        var notification = document.querySelector('.mdl-js-snackbar');
        notification.MaterialSnackbar.showSnackbar(
          {
            message: 'and..working!!'
          }
        );
    });

    function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}


</script>