如何在没有按钮的情况下激活 Toast

Question

我与 material 一起工作，我正在处理表格。我希望在数据库中发送表单时显示一个带有祝酒词的弹出窗口。

我尝试创建一个这样的函数：

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

        test();
 </script>

并且我已经定义了我的小吃店：

    <button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised " type="button" onclick="test()">Show Toast</button>
<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
    <div class="mdl-snackbar__text"></div>
    <button class="mdl-snackbar__action" type="button" ></button>
</div>

我想在页面加载时显示祝酒词，但我发现错误：

Uncaught TypeError: Cannot read property 'showSnackbar' of undefined
at test

但同时我可以通过控制台调用该函数并且它运行良好。

我该怎么做才能在页面加载时调用 toast 以及我错过了什么？谢谢

Answer 1

问题是material函数运行时没有加载，

看这个例子：

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

如何在没有按钮的情况下激活 Toast

How to active a Toast without button

javascript

toast

material-design-lite