All Products
Search
Document Center

Close multiple pages

Last Updated: Feb 18, 2021

This interface is used to roll back multiple levels of pages at a time.

Note: It is only allowed to popTo the pages within the current App instance, and the cross-appId jump is not allowed.

Use popTo interface

 
  1. // Close the currently opened page
  2. AlipayJSBridge.call('popTo', {
  3. index: -1
  4. });

Code example

  • Close the current page and pass data:

       
    1. <h1>Click "Execute" to close the current page and return data</h1>
    2. <a href="#" class="btn J_demo">Execute</a>
    3. <script>
    4. function ready(callback) {
    5. // Call directly if JSBridge has been injected
    6. if (window.AlipayJSBridge) {
    7. callback && callback();
    8. } else {
    9. // Monitor the injected events if JSBridge hasn't been injected
    10. document.addEventListener('AlipayJSBridgeReady', callback, false);
    11. }
    12. }
    13. ready(function(){
    14. document.querySelector('.J_demo').addEventListener('click', function() {
    15. // The passed data object will be received by the resume event on the upcoming page.
    16. AlipayJSBridge.call('popTo', {
    17. index: -1, // Return to the previous page, and if there is no previous page at this time, an error will be reported.
    18. data: { // Important: data is a dictionary rather than an array
    19. from: location.href,
    20. info: Date.now()
    21. }
    22. }, function(e) { // Add a callback, because popTo will not necessarily succeed (an error will be reported when the current page is the only one opened)
    23. alert(JSON.stringify(e));
    24. });
    25. });
    26. });
    27. </script>
  • Return to the page that complies with regulation match through urlPattern:

       
    1. <h1>Return to the URL that complies with a certain rule</h1>
    2. <h3></h3>
    3. <a href="javascript:void(0)" class="btn J_new_window">Open the current page in a new window</a>
    4. <a href="javascript:void(0)" class="btn J_demo">Return</a>
    5. <script>
    6. var query = getQuery();
    7. var depth = (+query.depth) || 0;
    8. document.querySelector('h3').innerHTML = 'current page depth: ' + depth;
    9. function ready(callback) {
    10. // Call directly if JSBridge has been injected
    11. if (window.AlipayJSBridge) {
    12. callback && callback();
    13. } else {
    14. // Monitor the injected events if JSBridge hasn't been injected
    15. document.addEventListener('AlipayJSBridgeReady', callback, false);
    16. }
    17. }
    18. ready(function(){
    19. document.querySelector('.J_demo').addEventListener('click', function() {
    20. AlipayJSBridge.call('popTo', {
    21. urlPattern: 'pop-to-url-pattern.html',
    22. }, function(e) {
    23. alert(JSON.stringify(e));
    24. });
    25. });
    26. document.querySelector('.J_new_window').addEventListener('click', function() {
    27. AlipayJSBridge.call('pushWindow', {
    28. url: location.pathname + '?depth=' + (1+depth),
    29. });
    30. });
    31. });
    32. </script>

API

 
  1. AlipayJSBridge.call('popTo',{
  2. index, urlPattern
  3. }, fn)

index and urlPattern refer to two query modes, which should not be used at the same time.

Input parameters

Name Type Description Required Default value Version
index int The index of the target interface in the session interface stack. If it is less than 0, it will be added to the index of the current interface. Y
urlPattern string The URL matching expression for the target interface (if URL contains urlPattern, the matching is successful) Y
fn function When the operation is successful, the callback may not be called; when the operation fails, the callback function is executed N

Out parameter

Name Type Description
result undefined The callback may not be called when the operation is successful; result should not be used

Error code

Error code Description
10 No arguments are configured;
Invalid index;
Failed to match urlPattern

Attentions

  • In general, popTo is used for scenarios that can be completed in multiple steps, such as returning when user information is complete, and returning after the 3-level address is selected.
  • When returning via urlPattern, popTo will return to the page furthest from the current page, which is the bottom of the stack. Meanwhile, it will not check whether the URL of the current page matches.
  • Please check the pResume event for information on how the data carried in popTo is received.