All Products
Search
Document Center

Open a new page

Last Updated: Feb 20, 2021

The pushWindow operation is used to open a new page in an active offline package. A transition animation defined in the system is played when the new page is opened. If you need to open a page of another app in an offline package, use the startApp operation instead.

Unlike location.href, the pushWindow operation is similar to opening a new tab in a browser on a computer. Each window is a new tab. The previous tab is switched to the background, but maintains in the running state. The JavaScript code of the previous page keeps running.

How it works

 
  1. // Open the homepage of Taobao, automatically read the title, and remove the right-side navigation bar.
  2. AlipayJSBridge.call('pushWindow', {
  3. url: 'https://m.taobao.com/', // The URL of the page that you want to open.
  4. // Configuration parameters of the opened page
  5. param: {
  6. readTitle: true, // Read the title automatically.
  7. showOptionMenu: false // Hide the menus on the right side.
  8. },
  9. // Optional, used for transferring parameters to a newly opened page.
  10. // Use AlipayJSBridge.startupParams to obtain passData on a newly opened page.
  11. passData: {
  12. key1: "key1Value",
  13. key2: "key2Value"
  14. }
  15. });
Note: In Android apps, the parameters must be enclosed in param: { }. In iOS apps, the parameters must be enclosed in passData: { }.

Sample code

  • Open the homepage of Taobao and remove the right-side navigation bar.
 
  1. <h1>Open the homepage of Taobao.</h1>
  2. <a class="btn J_demo">Execute</a>
  3. <script>
  4. function ready(callback) {
  5. // Call JS Bridge if it has been injected.
  6. if (window.AlipayJSBridge) {
  7. callback && callback();
  8. } else {
  9. // Listen to the injection event if it has not been injected.
  10. document.addEventListener('AlipayJSBridgeReady', callback, false);
  11. }
  12. }
  13. ready(function(){
  14. document.querySelector('a').addEventListener('click', function() {
  15. // Open the homepage of Taobao, automatically read the title, and remove the right-side navigation bar.
  16. AlipayJSBridge.call('pushWindow', {
  17. url: 'https://m.taobao.com/',
  18. param: {
  19. readTitle: true,
  20. showOptionMenu: false
  21. }
  22. });
  23. });
  24. });
  25. </script>
  • Open the homepage of Taobao and set the title bar to transparent.
 
  1. <h1>Open the homepage of Taobao.</h1>
  2. <a class="btn J_demo">Execute</a>
  3. <script>
  4. function ready(callback) {
  5. // Call JS Bridge if it has been injected.
  6. if (window.AlipayJSBridge) {
  7. callback && callback();
  8. } else {
  9. // Listen to the injection event if it has not been injected.
  10. document.addEventListener('AlipayJSBridgeReady', callback, false);
  11. }
  12. }
  13. ready(function() {
  14. document.querySelector('a').addEventListener('click', function() {
  15. AlipayJSBridge.call('pushWindow', {
  16. url: 'https://m.taobao.com',
  17. param: {
  18. transparentTitle: 'auto'
  19. }
  20. });
  21. });
  22. });
  23. </script>

API

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

Input parameters

Name Type Description Required Default value
url string The URL of the page that you want to open. Y “”
param dictionary The value FORMs in the supported key/value pair. N {}
passData dictionary The parameters that is passed by the new page. This parameter is applicable only to iOS. You can obtain these parameters by using the AlipayJSBridge.startupParams parameter on the new page. N {}

param parameter description

Name Type Description Default value
defaultTitle string The default title of the page. The value is displayed in the title bar before the page is loaded the first time. “”
showLoading bool Specifies whether to display the loading spinner before the page is 100% loaded. false
readTitle bool Specifies whether to read the title of the page and display the title in the title bar. true
pullRefresh bool Specifies whether pull-to-refresh is supported.
This parameter can be set to true only on local files.
false
allowsBounceVertical bool Specifies whether the page can be vertically pulled to a blank area out of the content. In Android, pages can only be pulled down to display the background or the domain name.
This parameter can be set to false only on local files in .alipay.com/.alipay.net/.
true
bounceTopColor int The color of the top margin when the page is pulled up to a blank area out of the content. The value is a decimal number. For example, the value of the bc color is 16775138. -
showTitleLoading bool Specifies whether to display a loading spinner on the left side of the title bar. false
transparentTitle string Specifies whether the title bar is transparent. This parameter cannot be used with the titleBarColor parameter.
Valid values:
1. always: The title bar is all transparent when the page is scrolled up and down.
2. auto: The transparency of the title bar gradually increases to 80 pt, which indicates completely transparent, as the page is scrolled down. The transparency gradually decreases to completely non-transparent as the page is scrolled up. When the page is scrolled up to the top, the title bar is completely non-transparent.
3. none: If the current page does not need to be transparent, you must set the param parameter in the pushWindow operation to set transparentTitle to none.
-
titleBarColor int The background color of the custom title bar. The value is a decimal number. For example, the value of the bc color is 16775138.
Note: This parameter cannot be used with the transparentTitle parameter.
-
scrollDistance int The distance that the page is scrolled to set the transparency to 0.96 when the transparentTitle parameter is set to auto. 80
titleImage string The address of the image used on the title. This parameter is supported only in iOS. A 3X PNG image is recommended. Only the current ViewController is affected. The pushWindow operation does not pass this parameter. To improve user experience, you can store the image in the global operation resource package. “”
closeCurrentWindow bool Specifies whether to close the current window when a new window is opened. false
closeAllWindow bool Specifies whether to close all windows of the current app when a new window is opened. false
animationType string The type of the animation. Valid values: none and push. Default value: push.
Note: This parameter is not supported in Android because animations are not supported in Android pages.
“”

Default inherited parameters of pushWindow

Name Inherited Note
url Y -
defaultTitle Y -
backBehavior Y The value is preferentially user-defined. If no values are specified, this parameter is set to pop.
showLoading Y -
readTitle Y -
pullRefresh Y -
toolbarMenu Y -
showProgress Y -
defaultSubtitle Y -
backgroundColor Y -
canPullDown Y -
showOptionMenu Y -
showTitleLoading Y -
showDomain Y -

Differences between pushWindow and location.href

The following content describes the differences between pushWindow and location.href:

  • Understand the Nebula container as a PC browser.
  • A window can be understood as a tab, and location.href is redirection between tabs.
  • The pushWindow operation is to open a new tab to superimpose on the previous tab. The page that is pushed is displayed at the top layer. All states of the previous tab located underneath are kept.
  • The location.href operation is to redirect to the destination page on the current tab.
  • When the tab pushed by calling the pushWindow operation is closed, in which the case backBehavior parameter is set to pop, if other opened windows exist, the previous window is displayed at the top layer and the resume operation is triggered.

Note

  • When you call the pushWindow to open a page that corresponds to a specified URL, existing pages are not closed. To make sure that the performance does not deteriorate, do not open excessive pages. We recommend that you do not impose more than five layers of pages by calling the pushWindow operation on the same app. Otherwise, user experience is degraded and the app may stop responding.