The interface is used to display a toast, and the toast duration can be configured.
Use toast interface
AlipayJSBridge.call('toast', {
content: 'Operation succeeds.',
type: 'success',
duration: 2000
}, function() {
alert ("Execute after toast disappears");
});
// You can hide the pop-up toast via the hideToast interface
AlipayJSBridge.call('hideToast', {}, function() {
});
Code sample
<h1>Click the buttons below to see the different effects</h1>
<a href="javascript:void(0)" class="btn success">Display success information</a>
<a href="javascript:void(0)" class="btn fail">Display failure information</a>
<a href="javascript:void(0)" class="btn exception">Display exception information</a>
<a href="javascript:void(0)" class="btn none">Display information only</a>
<a href="javascript:void(0)" class="btn duration">Display information for 3.5s</a>
<script>
function toast(config, callback){
AlipayJSBridge.call('toast',config, callback);
}
function ready(callback) {
// Call directly if JSBridge has been injected
if (window.AlipayJSBridge) {
callback && callback();
} else {
// Monitor the injected events if JSBridge hasn't been injected
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function() {
document.querySelector('.success').addEventListener('click', function() {
toast({
content: 'Operation succeeds',
type: 'success'
});
});
document.querySelector('.fail').addEventListener('click', function() {
toast({
content: 'Network is busy now, please try again later.',
type: 'fail'
});
});
document.querySelector('.exception').addEventListener('click', function() {
toast({
content: 'Attention, an exception has occurred.',
type: 'exception'
});
});
document.querySelector('.none').addEventListener('click', function() {
toast({
content: 'Welcome',
});
});
document.querySelector('.duration').addEventListener('click', function() {
toast({
content: 'Please wait a moment',
duration: 3500,
}, function(e){
alert ('Call back after toast disappears');
});
});
});
</script>
API
AlipayJSBridge.call('toast', {
content, type, duration
}, 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 byhideLoading
.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.