jQuery Mobile中的页面加载与跳转机制

第一次做用jQuery Mobile做东西，发现一些跟平时的思维习惯不太一样的。其中这个框架的页面加载机制便是其中一个。如果不明白其中的奥秘，往往会出现一些让人摸不着头脑的怪现象，比如页面进入后点击按钮后Javascript就是不执行，而用F5刷新页面后又可以正常执行等。

即使我们明白了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会被加载进去，其余的东西则无缘进入页面渲染。

直接上代码，或许更容易让人明白些：

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>

参考资料来源：http://stackoverflow.com/questions/17403825/link-fails-to-work-unless-refreshing/17403907#17403907

posted on 2013-12-08 15:13  pinocchioatbeijing  阅读(13476)  评论(1)  编辑  收藏  举报

导航