使用 jQuery-mobile 转换以不同方式加载页面

Posted 2023-05-08

技术标签:

【中文标题】使用 jQuery-mobile 转换以不同方式加载页面【英文标题】：page loaded differently with jQuery-mobile transition 【发布时间】：2013-03-04 01:54:19 【问题描述】：

我有一个网站在直接加载（例如通过调用其 URL）时可以正常工作，但是，当我通过滑块转换进入该网站时：

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

似乎它不会加载刚刚在 head 中声明为的 .js 文件：

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

我是 jQuery mobile、jQuery、HTML5 和 JS 的新手。那么......有人可以向我解释一下关于页面加载的 URL 调用和 jQuery 移动转换之间的区别是什么？

（顺便说一句。我正在使用它来开发 android 应用）

【问题讨论】：

【参考方案1】：

如果有多个 HTML 文件，HEAD 只会加载到第一个 HTML 文件中。在其他文件中，仅加载了 BODY 内容。这是因为 AJAX 用于将其他页面加载到 DOM 中。因为在原始 DOM 中已经有 HEAD 内容，所以只会从其他页面加载正文。

如果您将 AJAX 完全加载，或者如果您在第一个 HTML 文件中初始化所有 js 文件，则可以防止这种情况发生。

如果您想了解更多信息，请查看我的其他 ANSWER 以及其他几个解决方案，或者找到它HERE。

示例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>

【讨论】：

第一个 HTML 的头部会被用于所有其他页面吗？我可以在第一个站点加载我的 JS 吗？第一个 HTMl 头将用于所有其他页面。除非您关闭 ajax，否则每次页面更改都会正常加载页面，但您不会有过渡效果。因此，在第一个 HTML HEAD 中初始化所有 js 文件。如果您创建一个小示例，您甚至可以对其进行测试。如果不会加载，为什么第 2 页上会有<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>？还是有一些例外？这里只是为了向您展示示例 1 和示例 2 之间的区别。我将其删除，一切仍将正常工作。

以上是关于使用 jQuery-mobile 转换以不同方式加载页面的主要内容，如果未能解决你的问题，请参考以下文章

CSS如何以不同方式转换（使用转换）父母和孩子

如何从第一个弹出窗口中打开第二个 jquery-mobile 弹出窗口

一起使用 JQuery-Mobile/Phonegap 的正确方法？

通过 jQuery-mobile 连接到 sql-server

如何使用 jQuery-mobile 开发看起来适合 Android 的 UI？

jQuery-Mobile 学习笔记