Run javascript after mobile 'back' press

Question

Run javascript after mobile 'back' press

We have a mobile site (ASP.NET in MVC style) which, among other things, displays a fullscreen HTML slideshow.

To display this, we run code on the mobileHTMLMovie view like so:

$( function() {
    $(document).bind('pageinit', function() {
    $("header").hide();
    $(".subHeader").hide();
    $(".subHeaderAccent").hide();
    $("footer").hide();
    $(".ui-content").css("width", "100%").css("height", "100%").css("margin","0").css("background-color", "#000");
    });
});

The problem we're seeing is that when the user pushes the 'back' button (s/he's limited to the hardware controls, as this code disables all the wrapper elements, including our HTML movement buttons) the elements remain hidden.

I have been unable to find a way to run the 'reversal' code (show instead of hide, removing the style attribute from ".ui-content") on the page they land on. The page they land on doesn't run document.ready when they arrive, the movie page doesn't run 'onunload' or 'onbeforeunload', and the other suggestion I've found online (.live('click') on the '[data-rel=back]' element) hasn't worked either.

Does anyone have any suggestions?

1 Answers

Andrew Burgess · Accepted Answer · 2020-03-16 11:04:27 +0000 UTC

Could you try to use the History object and bind to the popstate event? Basically, when the slideshow is displayed, you would push a new state in, and then when the user presses back, it might trigger the pop.

Example:

$(function() {
    $(document).bind('pageinit', function() {
        $("header").hide();
        $(".subHeader").hide();
        $(".subHeaderAccent").hide();
        $("footer").hide();
        $(".ui-content").css("width", "100%").css("height", "100%").css("margin","0").css("background-color", "#000");

        window.history.replaceState("slideshow", "Slideshow", "slideshow");
    });

    window.addEventListener('onpopstate', function(event) {
        if (event.state === "slideshow") {
            //Close the slideshow
        }
    }
});

I'm not sure what the flow is for the page, but you'd either use replaceState or pushState depending on how the slideshow is launched

Resources