admin管理员组文章数量:1390931
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)
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)
Share Improve this question asked Mar 15, 2013 at 11:12 Daniel KlöckDaniel Klöck 21.2k10 gold badges97 silver badges157 bronze badges1 Answer
Reset to default 6In 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 pletely, 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./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./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./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./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./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./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>
本文标签： javascriptpage loaded differently with jQuerymobile transitionStack Overflow
版权声明：本文标题：javascript - page loaded differently with jQuery-mobile transition - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744620928a2616018.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论