External link and hardware back button with jQuery Mobile

Question

This is my first web site with jquery mobile, and i am having problems with external links.

I´ll show yo one example.

This is Page A

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>PageA</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />    
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <link href="Style/Style.css" rel="stylesheet" type="text/css" />
    <link href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>   
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>

</head>
<body>
 <!-- Start of first page -->
<div data-role="page" id="pageA" data-title="Page A" data-theme="b" data-dom-cache="false">
    <div data-role="header" data-theme="b">
        <h1>Page A</h1>           
    </div>
    <!-- /header -->
    <div data-role="content">

        <ul data-role="listview" data-theme="g">
            <li><a href="PageB.htm" rel="external">PageB</a></li>                
        </ul>                

    </div>

</div>

When I click the link, I am going to Page B (so far, everything is ok)

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pag B</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />    
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <link href="Style/Style.css" rel="stylesheet" type="text/css" />
    <link href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>   
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
     <!-- Start of first page -->
    <div data-role="page" id="pageB" data-title="Page B" data-theme="b" data-dom-cache="false">
        <div data-role="header" data-theme="b">
            <h1>Page B</h1>           
        </div>
        <!-- /header -->
        <div data-role="content">

            <p>I am Page B!!!</p>             

        </div>
        <!-- /content -->
        <div data-role="footer" data-theme="c">
            <h4>Test</h4>
        </div>
        <!-- /footer -->
</div>

When I am in the Page B, I press the hardware back button in an Android Mobile device and going back to Pag A.

Then I press again the link in Page A. The Page B appears but it also load Page A with the tipical loading div showing..

The question is? why is this happenig?? and second what´s the way for doing this?

I´ve found a way to solve with the pagebeforehide event in page B but I think this is not the way to do that..

Thank you!

I've run into something like this but having to do with forms, where the back arrow is somehow retaining the form from the previous submit. Not good. No solutions to this? — iJames, Nov 17 '11 at 00:39

score 3 · Answer 1 · edited May 23 '17 at 12:11

I was having a similar issue. I managed to narrow it to problems related to the use of the hardware back button. Mobile browsers did not launch the document.ready or pageinit event when using this button. Moreover, these events were firing more than once when going again from page B to A after pushing the back button.

Binding to onunload inside the body element fixed the issue. In the example above, including it on the body tag of page A solves the problem:

Thanks to Pumbaa80 and Nickolay Is there a cross-browser onload event when clicking the back button?

External link and hardware back button with jQuery Mobile

1 Answers1