All Products
Search
Document Center

Set title

Last Updated: Feb 18, 2021

This interface is used to set the title bar of the page, including main title, subtitle, and menu items of the title.

Note: Due to Apple’s ATS restrictions, the image URL must be either an HTTPS link or base64. HTTP links will be ignored.

Use setTitle interface

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

Code example

Set up title bars:

 
  1. <h1>Click the buttons below to see the different effects</h1>
  2. <a href="javascript:void(0)" class="btn title">Only set the title</a>
  3. <a href="javascript:void(0)" class="btn subTitle">Title + subtitle</a>
  4. <a href="javascript:void(0)" class="btn clear">Clear the title</a>
  5. <script>
  6. function ready(callback) {
  7. // Call directly if JSBridge has been injected
  8. if (window.AlipayJSBridge) {
  9. callback && callback();
  10. } else {
  11. // Monitor the injected events if JSBridge hasn't been injected
  12. document.addEventListener('AlipayJSBridgeReady', callback, false);
  13. }
  14. }
  15. ready(function(){
  16. document.querySelector('.title').addEventListener('click', function() {
  17. AlipayJSBridge.call('setTitle', {
  18. title: 'Title'
  19. });
  20. });
  21. document.querySelector('.subTitle').addEventListener('click', function() {
  22. AlipayJSBridge.call('setTitle', {
  23. title: 'Title',
  24. subtitle: 'Subtitle'
  25. });
  26. });
  27. document.querySelector('.clear').addEventListener('click', function() {
  28. AlipayJSBridge.call('setTitle', {
  29. title: ' ',
  30. subtitle: ' ',
  31. });
  32. });
  33. });
  34. </script>

API

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

Input parameters

Name Type Description Required Default value Version
title string Main title text N
subtitle string Subtitle text N
image string Supports URL or base64. Please use a 3X image. If you’ve set an image, the first two parameters will be invalid, and the title will not be read from the webview callback N 9.9.5

Attentions

Empty title is not supported before Android 10.0.18, but it can be instead by setting an invisible string. This restriction has been removed since version 10.0.20.

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