Dan*_*iel 1 javascript jquery html5 android 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-App)
如果是多个HTML文件,HEAD则仅在第一个HTML文件中加载.在其他文件中,仅BODY加载内容.这是因为AJAX用于加载其他页面DOM.因为HEAD原件中已有内容,所以DOM只会从其他页面加载一个正文.
如果您AJAX完全转动加载,或者在第一个HTML文件中初始化所有js文件,则可以防止这种情况.
如果您想了解更多信息,请查看我的其他答案以及其他几种解决方案,或者在此处查找.
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>
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>