Страница загружается по-другому с переходом JQuery-Mobile

У меня есть сайт, который отлично работает при прямой загрузке (например, путем вызова его URL), однако, когда я попадаю на сайт с помощью ползункового перехода:

<li><a href="html/mySite.html" data-transition="slide">mySite</a></li>

кажется, что он не будет загружать файл.js, который только что объявлен в голове как:

<script type="text/javascript" src="../../myJS.js"></script>

Я новичок в мобильных jQuery, jQuery, HTML5 и JS. Итак... может кто-нибудь объяснить мне, в чем разница между URL-вызовом и мобильным переходом jQuery в отношении загрузки страницы?

(кстати. Я использую его для разработки Android-приложения)

Источник

1 ответ

Решение

В случае нескольких HTML файлы, HEAD загружается только в первом HTML файл. В других файлах только BODY контент загружен. Это потому что AJAX используется для загрузки других страниц в DOM, Потому что уже есть HEAD содержание внутри оригинала DOM только тело будет загружено с других страниц.

Это можно предотвратить, если вы включите AJAX загрузка полностью, или если вы инициализируете все ваши файлы JS внутри первого HTML файл.

Если вы хотите узнать больше, взгляните на мой другой ОТВЕТ с несколькими другими решениями или найдите ЗДЕСЬ.

Пример 1: правильный путь

HTML 1:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
    <script>
              $(document).on('pagebeforeshow', '#index', function(){       
                        alert('Page One');
                });

                $(document).on('pagebeforeshow', '#second', function(){       
                        alert('Page Two');                  
                });         
    </script>      
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="second.html" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

HTML 2:

    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="index.html" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>

Пример 2: неверный путь

HTML 1:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
    <script>
              $(document).on('pagebeforeshow', '#index', function(){       
                        alert('Page One');
                });     
    </script>      
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="second.html" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

HTML 2:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
        <script>
                $(document).on('pagebeforeshow', '#second', function(){       
                        alert('Page Two');                  
                }); 
        </script>         
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
</head>
<body>    
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="index.html" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>
Источник
Другие вопросы по тегам