Set the title using setTitle - Mobile Platform as a Service

Use this API to set the title bar of a page. The title bar includes the main title, subtitle, and title menu items.

Note

Because of Apple's App Transport Security (ATS) restrictions, the image URL must be an HTTPS link or a Base64 string. HTTP links are ignored.

Using the setTitle API

AlipayJSBridge.call('setTitle', {
  title: 'Title',
});

Code examples

Set different types of title bars:

<h1>Click the following buttons to see different effects</h1>
<a href="javascript:void(0)" class="btn title">Set title only</a>
<a href="javascript:void(0)" class="btn subTitle">Title + Subtitle</a>
<a href="javascript:void(0)" class="btn clear">Clear title</a>

<script>
function ready(callback) {
  // If jsbridge is already injected, call it directly.
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // If it is not injected, listen for the injection event.
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(){
  document.querySelector('.title').addEventListener('click', function() {
    AlipayJSBridge.call('setTitle', {
      title: 'Title'
    });
  });

  document.querySelector('.subTitle').addEventListener('click', function() {
    AlipayJSBridge.call('setTitle', {
      title: 'Title',
      subtitle: 'Subtitle'
    });
  });

  document.querySelector('.clear').addEventListener('click', function() {
    AlipayJSBridge.call('setTitle', {
      title: ' ',
      subtitle: ' ',
    });
  });
});
</script>

API reference

AlipayJSBridge.call('setTitle',{
  title, subtitle, image
}, fn)

Input parameters

Property	Type	Description	Required	Default value
title	string	The main title text.	N	""
subtitle	string	The subtitle text.	N	""
image	string	The image URL or Base64 string. Use a 3X image. If you set this parameter, the title and subtitle parameters are ignored. The title is not read from the WebView callback.	N	""

Notes

Android versions earlier than 10.0.18 do not support setting an empty title. You can work around this by setting the title to an invisible string. This limitation is removed in Android 10.0.20 and later.

AlipayJSBridge.call('setTitle', {
  title: '\u200b',
});