pushWindow

You can use pushWindow to open a new page, with transition animation provided in iOS platform. Please note that you cannot use this API to open pages from other applications (Please use startApp API instead).

Please use location.href for opening deep-linking page with custom scheme instead of using pushWindow.

The behaviour of pushWindow is similar to opening new tab in browser, pushWindow creates a new instance of page, and keep the state of pervious page in stack, allowing the Javascript in old page continue running in the background.

Usage

// Open taobao homepage, use taobao homepage title as page title and remove option menu
AlipayJSBridge.call('pushWindow', {
  url: 'https://m.taobao.com/',
  param: {
    readTitle: true,
    showOptionMenu: false
  }
});

Example

Open taobao homepage without option menu

<h1>Open taobao homepage</h1>
<a class="btn J_demo">Execute</a>
<script>
function ready(callback) {
  // Invoke directly if JSBridge is already injected
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // Otherwise listen to `AlipayJSBridgeReady` event
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('a').addEventListener('click', function() {
    // Open taobao homepage, use taobao homepage title as page title and remove option menu
    AlipayJSBridge.call('pushWindow', {
      url: 'https://m.taobao.com/',
      param: {
        readTitle: true,
        showOptionMenu: false
      }
    });
  });
});
</script>

Open new page via deep-link with custom schema

<h1>Open desired app</h1>
<a class="btn J_demo">Execute</a>
<script>
function ready(callback) {
  // Invoke directly if JSBridge is already injected
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // Otherwise listen to `AlipayJSBridgeReady` event
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('a').addEventListener('click', function() {
    AlipayJSBridge.call('pushWindow', {
      url: 'alipays://platformapi/startapp?appId=60000002',
    });
  });
});
</script>

Open new page with transparent title bar

<h1>Open taobao homepage</h1>
<a class="btn J_demo">Execute</a>
<script>
function ready(callback) {
  // Invoke directly if JSBridge is already injected
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // Otherwise listen to `AlipayJSBridgeReady` 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

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

Input Parameters

Parameter Table

Transfer Parameters to new page

The values of some of the pushWindow Parameters from the current H5 page window are automatically transferred to the new opening page, please refer to the following table for transferrable parameters

Differences between pushWindow and location.href

Beginners are usually confused by pushWindow and location.href, and having doubts such as why resume events are not being triggered properly. Actually the concept is quite simple if you understand the following key points.

• First think Nebula container as a Web browser
• A window or H5 page can be considered as a Tab
• pushWindow action is similar to opening a page in a new Tab and deactivating the current Tab
• location.href action is like loading a webpage inside the currently opened Tab
• When the current Tab is being closed (pop) and previous Tab is still alive, the previous Tab will be re-activated, and a resume event is triggered in this case

Remarks

• Since the current page is not closed when calling pushWindow to open new page, opening too many pages may consume lots of memory and thus make application performance poor. It is recommended to keep the number of opened pages to 5, otherwise it will be a bad user experience with potential crashes
• Calling pushWindow API will close the existing page that matches the passed appId and open create a new page with the same appId
• If the input parameters are not effective when opening a page via deep-linking with custom schema, that is probably because the input parameters are overwritten by the H5 App configuration
• Instead of window.location.href, you can use closeCurrentWindow parameter to close the current window and open a new one. However, there is a technical limitation in iOS platform, such that the newly opened window cannot be closed via exitApp or startApp+closeCurrentApp. It is recommended to pushWindow+closeCurrentWindow in this scenario