All Products
Search

This Product

    Mobile Platform as a Service:Toast

    Document Center

    Mobile Platform as a Service:Toast

    Last Updated:Feb 18, 2021

    The interface is used to display a toast, and the toast duration can be configured.

    Use toast interface

    1. AlipayJSBridge.call('toast', {
    2.   content: 'Operation succeeds.',
    3.   type: 'success',
    4.   duration: 2000
    5. }, function() {
    6.   alert ("Execute after toast disappears");
    7. });
    9. // You can hide the pop-up toast via the hideToast interface
    11. AlipayJSBridge.call('hideToast', {}, function() {
    12. });

    Code sample

    1. <h1>Click the buttons below to see the different effects</h1>
    2. <a href="javascript:void(0)" class="btn success">Display success information</a>
    3. <a href="javascript:void(0)" class="btn fail">Display failure information</a>
    4. <a href="javascript:void(0)" class="btn exception">Display exception information</a>
    5. <a href="javascript:void(0)" class="btn none">Display information only</a>
    6. <a href="javascript:void(0)" class="btn duration">Display information for 3.5s</a>
    8. <script>
    9. function toast(config, callback){
    10.   AlipayJSBridge.call('toast',config, callback);
    11. }
    13. function ready(callback) {
    14.   // Call directly if JSBridge has been injected
    15.   if (window.AlipayJSBridge) {
    16.     callback && callback();
    17.   } else {
    18.     // Monitor the injected events if JSBridge hasn't been injected
    19.     document.addEventListener('AlipayJSBridgeReady', callback, false);
    20.   }
    21. }
    22. ready(function() {
    23.   document.querySelector('.success').addEventListener('click', function() {
    24.     toast({
    25.       content: 'Operation succeeds',
    26.       type: 'success'
    27.     });
    28.   });
    30.   document.querySelector('.fail').addEventListener('click', function() {
    31.     toast({
    32.       content: 'Network is busy now, please try again later.',
    33.       type: 'fail'
    34.     });
    35.   });
    37.   document.querySelector('.exception').addEventListener('click', function() {
    38.     toast({
    39.       content: 'Attention, an exception has occurred.',
    40.       type: 'exception'
    41.     });
    42.   });
    44.   document.querySelector('.none').addEventListener('click', function() {
    45.     toast({
    46.       content: 'Welcome',
    47.     });
    48.   });
    50.   document.querySelector('.duration').addEventListener('click', function() {
    51.     toast({
    52.       content: 'Please wait a moment',
    53.       duration: 3500,
    54.     }, function(e){
    55.       alert ('Call back after toast disappears');
    56.     });
    57.   });
    58. });
    59. </script>

    API

    1. AlipayJSBridge.call('toast', {
    2.   content, type, duration
    3. }, fn)

    Input parameters

    Name Type Description Required Default value Version
    content string Text content Y ‘’ 8.0
    type string none / success / fail / exception. Text must be passed in case of toast for exceptions N ‘none’ 8.1
    duration int Duration of display, in milliseconds N 2000 8.1
    xOffset float Left is the positive direction, in pixels N 0 10.0.15
    yOffset float Up is the positive direction, in pixels N 0 10.0.15
    fn function Callback function, which is called when toast disappears N

    Attentions

    • Toast can automatically close, but it can also be closed via hideLoading. Although this method is not common, it is necessary to prevent toast from being closed by hideLoading.a
    • For Android, if the system notification is turned off, the toast will not appear.
    • For the Android versions below 10.1.2, duration only supports 2000 and 3500. The duration less than or equal to 2000 is equivalent to 2000, and the one more than 2000 is equivalent to 3500.