JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="first">
    <div data-role="header">
         <h1>Loading page</h1>

    </div>
    <p>Redirecting to Main page...</p>
</div>
<div data-role="page" id="second">
    <div data-role="header">
         <h1>Main Page</h1>

    </div>
    <p>Welcome!</p>
    <a href="#third" class="ui-btn">Third page</a>
</div>
<div data-role="page" id="third">
    <div data-role="header" data-add-back-btn="true">
         <h1>Third Page</h1>

    </div>
    <p>Welcome!</p>
</div>

JavaScript

$(document).on("pagecontainershow", function (e, ui) {
    /* for demo */
    var active = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
    if (active == "first") {
        setTimeout(function () {
            $.mobile.pageContainer.pagecontainer("change", "#second", {
                transition: "flip"
            });
        }, 2000);
    }
    /* code */
    if (typeof ui.prevPage[0] !== "undefined" && ui.prevPage[0].id == "first") {
        /* for comparison purpose */
        /* before removing history record */
        console.log($.mobile.navigate.history.stack);
        /* remove record */
        $.mobile.navigate.history.stack.splice(0, 1);
        /* remove page */
        $(ui.prevPage).remove();
        /* for comparison purpose */
        /* after removing history record */
        console.log($.mobile.navigate.history.stack);
    }
});