使用 jQuery-mobile 转换以不同方式加载的页面 [英] page loaded differently with jQuery-mobile transition

查看：21
本文介绍了使用 jQuery-mobile 转换以不同方式加载的页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个网站在直接加载时运行良好(例如，通过调用其 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 应用程序)

解决方案

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

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

如果您想了解更多信息，请查看我的其他ANSWER 与其他几种解决方案，或找到它此处.

示例 1:正确的方法

HTML 1 :

<头><title>jQM Complex Demo</title><元名称=视口"内容=宽度=设备宽度；初始规模=1.0；最大尺度=1.0；最小尺度=1.0；用户可扩展=否；目标密度Dpi=设备-dpi"/><link rel="样式表";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><脚本>$(document).on('pagebeforeshow', '#index', function(){alert('第一页');});$(document).on('pagebeforeshow', '#second', function(){alert('第二页');});<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"</script><身体><div 数据角色=页面"id=索引"><div data-theme="a";数据角色=标题"><h3>第一页<a href="second.html";class=ui-btn-right">下一个</a>

<div data-role=内容">

<div data-theme="a";数据角色=页脚"数据位置=固定">

HTML 2:

 
<div data-theme="a";数据角色=标题"><h3>第二页<a href="index.html";class=ui-btn-left">返回</a>
<div data-role=内容">

<div data-theme="a";数据角色=页脚"数据位置=固定">

示例2:错误的方式

HTML 1 :

<头><title>jQM Complex Demo</title><元名称=视口"内容=宽度=设备宽度；初始规模=1.0；最大尺度=1.0；最小尺度=1.0；用户可扩展=否；目标密度Dpi=设备-dpi"/><link rel="样式表";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><脚本>$(document).on('pagebeforeshow', '#index', function(){alert('第一页');});<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"</script><身体><div 数据角色=页面"id=索引"><div data-theme="a";数据角色=标题"><h3>第一页<a href="second.html";class=ui-btn-right">下一个</a>
<div data-role=内容">
<div data-theme="a";数据角色=页脚"数据位置=固定">

HTML 2:

<头><title>jQM Complex Demo</title><元名称=视口"内容=宽度=设备宽度；初始规模=1.0；最大尺度=1.0；最小尺度=1.0；用户可扩展=否；目标密度Dpi=设备-dpi"/><link rel="样式表";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><脚本>$(document).on('pagebeforeshow', '#second', function(){alert('第二页');});<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"</script><身体><div 数据角色=页面"id=第二个"><div data-theme="a";数据角色=标题"><h3>第二页<a href="index.html";class=ui-btn-left">返回</a>
<div data-role=内容">
<div data-theme="a";数据角色=页脚"数据位置=固定">

I have a site that works fine when loaded directly (f.e. by calling its URL), however, when I get to the site through a slider transition:

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

it seems as if it would not load a .js file which is just declared within head as:

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

I am new to jQuery mobile, and jQuery, and HTML5, and JS. So... can someone explain to me what is the difference between a URL call and a jQuery mobile transtition regarding to the loading of the page?

(btw. I am using it to develop an Android-App)

解决方案

In case of multiple HTML files, HEAD is only loaded in the first HTML file. In other files, only a BODY content is loaded. This is because AJAX is used to load other pages into the DOM. Because there's already a HEAD content inside an original DOM only a body will be loaded from the other pages.

This can be prevented if you turn AJAX loading completely, or if you initialize all of your js fils inside a first HTML file.

If you want to find out more take a look at my other ANSWER with several other solutions, or find it HERE.

Example 1: Correct way

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>

Example 2: Incorrect way

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>

这篇关于使用 jQuery-mobile 转换以不同方式加载的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆