Mobile Platform as a Service:Open a new page

The difference between the pushWindow method and the frontend location.href property is similar to opening a new tab in a desktop browser. When you use pushWindow, the original page is pushed to the background, but its state is preserved and its JavaScript continues to run.

How to use the pushWindow API

// Open the Taobao homepage, automatically read the title, and remove the right menu button.
AlipayJSBridge.call('pushWindow', {
  url: 'https://m.taobao.com/',   // The URL of the page to open.
  // Configuration parameters for the new page.
  param: {
    readTitle: true,              // Automatically read the title.
    showOptionMenu: false         // Hide the right menu.
  },
  // Optional. Used to pass parameters to the new page.
  // In the new page, use AlipayJSBridge.startupParams to get passData.
  passData: {
    key1: "key1Value",
    key2: "key2Value"
  }
});

Code examples

• Open the Taobao homepage and remove the right-side menu.

  <h1>Open Taobao Homepage</h1>
  <a class="btn J_demo">Execute</a>
  <script>
  function ready(callback) {
    // If jsbridge is already injected, call it directly.
    if (window.AlipayJSBridge) {
        callback && callback();
    } else {
        // If not injected, listen for the injection event.
        document.addEventListener('AlipayJSBridgeReady', callback, false);
    }
  }
  ready(function(){
    document.querySelector('a').addEventListener('click', function() {
        // Open the Taobao homepage, automatically read the title, and remove the right menu.
        AlipayJSBridge.call('pushWindow', {
            url: 'https://m.taobao.com/',
            param: {
                readTitle: true,
                showOptionMenu: false
            }
        });
    });
  });
  </script>

• Set a transparent title bar when you open the page.

  <h1>Open Taobao Homepage</h1>
  <a class="btn J_demo">Execute</a>
  <script>
  function ready(callback) {
  // If jsbridge is already injected, call it directly.
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // If not injected, listen for the injection event.
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
  }
  ready(function() {
  document.querySelector('a').addEventListener('click', function() {
    AlipayJSBridge.call('pushWindow', {
      url: 'https://m.taobao.com',
      param: {
        transparentTitle: 'auto'
      }
    });
  });
  });
  </script>

API reference

AlipayJSBridge.call('pushWindow', {
    url, param, passData
})

Input parameters

param parameter details

Default inheritance of pushWindow parameters

Differences between pushWindow and location.href

The key differences between pushWindow and location.href are as follows:

• You can think of the Nebula container as a desktop browser.

• A window is like a browser tab. The location.href property performs standard page navigation within that tab.

• The pushWindow method opens a new tab. It pushes the previous page to the background, displays the new page in the foreground, and preserves the state of the background page.

• In contrast, location.href navigates to a new page within the same tab, replacing the current page.

• When a page that was opened with pushWindow is closed (popped), the previous window is restored and displayed. This action triggers a resume event.