use the toast api to show toast notifications - Mobile Platform as a Service

This API displays a toast notification that disappears after a specified duration.

How to use the toast API

AlipayJSBridge.call('toast', {
  content: 'Operation successful',
  type: 'success',
  duration: 2000
}, function() {
  alert("Executed after the toast notification disappears");
});

// Use the hideToast API to hide an active toast notification.

AlipayJSBridge.call('hideToast', {}, function() {
});

Code example

<h1>Click the buttons below to see different effects</h1>
<a href="javascript:void(0)" class="btn success">Show success message</a>
<a href="javascript:void(0)" class="btn fail">Show failure message</a>
<a href="javascript:void(0)" class="btn exception">Show exception message</a>
<a href="javascript:void(0)" class="btn none">Show message only</a>
<a href="javascript:void(0)" class="btn duration">Show message for 3.5s</a>

<script>
function toast(config, callback){
  AlipayJSBridge.call('toast',config, callback);
}

function ready(callback) {
  // If jsbridge is already injected, call it directly.
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // If not, listen for the injection event.
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('.success').addEventListener('click', function() {
    toast({
      content: 'Operation successful',
      type: 'success'
    });
  });

  document.querySelector('.fail').addEventListener('click', function() {
    toast({
      content: 'The network is busy. Try again later.',
      type: 'fail'
    });
  });

  document.querySelector('.exception').addEventListener('click', function() {
    toast({
      content: 'An exception occurred. Please note.',
      type: 'exception'
    });
  });

  document.querySelector('.none').addEventListener('click', function() {
    toast({
      content: 'Welcome',
    });
  });

  document.querySelector('.duration').addEventListener('click', function() {
    toast({
      content: 'Please wait',
      duration: 3500,
    }, function(e){
      alert('Toast dismissed callback');
    });
  });
});
</script>

API reference

Important

Toast notifications close automatically. You can also close them using `hideLoading`. Because this is an uncommon use case, ensure that `hideLoading` does not close a notification unintentionally.
On Android, the toast notification does not appear if system notifications are disabled.
On Android versions earlier than 10.1.2, the `duration` parameter supports only two display lengths: 2000 ms and 3500 ms. A value less than or equal to 2000 ms defaults to 2000 ms. A value greater than 2000 ms defaults to 3500 ms.

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

Input parameters

Property	Type	Description	Required	Default
content	string	The text content.	Yes	""
type	string	Valid values: `none`, `success`, `fail`, and `exception`. If you set this parameter to `exception`, you must specify the `content` parameter.	N	"none"
duration	int	The display duration in milliseconds.	N	2000
xOffset	float	The positive direction is to the left, measured in px.	No	0
yOffset	float	The vertical offset in pixels. A positive value moves the notification up.	No	0
fn	function	The callback function that is invoked after the toast notification disappears.	N	-