Внешняя ссылка и аппаратная кнопка возврата с jQuery Mobile - PullRequest
Новая
       34

Внешняя ссылка и аппаратная кнопка возврата с jQuery Mobile

4 голосов
/ 19 октября 2011

Это мой первый веб-сайт с jquery mobile, и у меня проблемы с внешними ссылками.

Я покажу вам один пример.

Это страница А 

<!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>

Когда я нажимаю на ссылку, я перехожу на страницу B (пока все в порядке) 

<!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>

Находясь на странице B, я нажимаю аппаратную кнопку возврата на мобильном устройстве Android и возвращаюсь на страницу А.

Затем я снова нажимаю на ссылку на странице A. Страница B появляется, но она также загружает страницу A с типичным разделением загрузки, показывающим ..

Вопрос? почему это происходит ?? а во-вторых, как это сделать?

Я нашел способ решить с помощью события pagebeforehide на странице B, но я думаю, что это не способ сделать это ..

Спасибо!

1 Ответ

3 голосов
/ 06 февраля 2012

У меня была похожая проблема.Мне удалось сузить это до проблем, связанных с использованием аппаратной кнопки возврата.Мобильные браузеры не запускали событие document.ready или pageinit при использовании этой кнопки.Более того, эти события запускались более одного раза при переходе со страницы B на A после нажатия кнопки назад.

Привязка к onunload внутри элемента body устранила проблему.В приведенном выше примере включение его в тег body страницы A решает проблему:

Благодаря Pumbaa80 и Nickolay Существует ли событие загрузки между браузерами при нажатии кнопки назадкнопка

...