Monaca Onsen UI Discord Chat Github Repo

Perform function on closing a page using ons-navigator



  • I have a small app that uses ons-navigator to load 3 or 4 different pages. One 1 page load, I run a function to ensure the user is online (has an internet connection) using an event listener. When that page closes, I would like to remove that event listener. How do I run a function on both the user hitting the BACK button or swiping back (this is for iOS)?



  • Hi,

    I have done this in my project before, to avoid user back accidentally.

    "ons-back-button: is a component that shows the button and also the action “popPage()”, so we cannot use it. Instead of “<div class=“left”><ons-back-button>Page 1</ons-back-button></div>”, we use the following to draw the back-button.

    <div class="back-button" style="display: inline-block;" onclick="showConfirm()">
        <span class="back-button__icon">
            <!--?xml version="1.0" encoding="UTF-8"?-->
            <svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>ios-back-button-icon</title>
                <g id="toolbar-back-button" stroke="none" stroke-width="1" fill-rule="evenodd">
                    <g id="ios" transform="translate(-34.000000, -30.000000)">
                        <polygon id="ios-back-button-icon" points="34 40.5 44.5 30 46.5 32 38 40.5 46.5 49 44.5 51"></polygon>
                   </g>
               </g>
           </svg>
        </span>
        <span class="back-button__label" style="">Page 1</span>
    </div>
    

    We have to write the back-button function by ourselves, we call it “showConfirm()”. Ask your confirmation before popPage().

    var showConfirm = function() {
        ons.notification.confirm({
            message: 'Are you sure to exit?',
            buttonLabels: ['Yes', 'No'],
            primaryButtonIndex: 1,
            callback: function(i) {
                if (i === 0) {
                     document.querySelector('#myNavigator').popPage()
                } else {
                    ons.notification.alert('You have cancelled back to page 1');
                }
            }
        })
    };
    

    So when you press the back button, it will show a dialog to have your confirmation, if you press ‘yes’, then it will go back to page 1.

    Best Regards
    Gobi