jQuery Mobile中的頁面加載與跳起色制

時間 2019-11-08

原文原文鏈接

第一次作用jQuery Mobile作東西，發現一些跟平時的思惟習慣不太同樣的。其中這個框架的頁面加載機制即是其中一個。若是不明白其中的奧祕，每每會出現一些讓人摸不着頭腦的怪現象，好比頁面進入後點擊按鈕後Javascript就是不執行，而用F5刷新頁面後又能夠正常執行等。css

即便咱們明白了HTML文件與jQuery Mobile中page概念的區別，也仍是不能解決上述問題。固然，瞭解這個是一個大前提。原來，jQuery Mobile是用Ajax的方式加載全部HTML中的標記data-role="page"的DIV元素中，第一個HTML頁面通常都是徹底加載，包括 HEAD 和BODY 都會被加載到DOM中，完成後即是連接到的其餘頁面內容的加載。第二個HTML頁面只有 BODY 中的內容會被以Ajax的方式加載到頭一個HTML的 DOM中。 而且第二HTML頁面的 BODY 中的內容也並不是所有加載，而僅僅是其中的第一個帶data-role="page"屬性的DIV會被加載進去，其他的東西則無緣進入頁面渲染。html

直接上代碼，或許更容易讓人明白些：jquery

index.html

<!DOCTYPE html>
    <html lang="en">
        <head>
            <!-- META TAGS Declaration -->
            <meta charset="UTF-8">
            <title>TEst</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>              
            <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
            <script>
            $(document).on('pagebeforeshow', '#foo', function(){ 
                alert($('#body-test').html());
            });
            </script>           
        </head>

        <body id="body-test">
            <div data-role="page" id="portfolio"  data-add-back-btn="true">             
                <div data-role="content" data-theme='c' >
                    <a href="test.html" data-role="button">Go to Bar</a>
                </div>
            </div><!-- Page Project #1 -->
        </body>     
</html>

test.html

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="style/jquery.mobile-1.3.1.css" />
        <script src="jquery-js/jquery-1.10.1.js"></script>
        <script src="jquery-js/jquery.mobile-1.3.1.js"></script>
        <title>Foobar</title>
    </head>

    <body>
        <div data-role="page" id="foo">
            <div data-role="content">
                <a href="#bar" data-role="button">Go to Bar</a>
            </div>
        </div>

        <div data-role="page" id="bar">
            <div data-role="content">
                <p>Bar</p>
            </div>
        </div>
    </body>
</html>