$ .getScript和css问题与phonegap和jquery手机 [英] $.getScript and css issue with phonegap and jquery mobile
问题描述
这里是我的文件。
/www/js/index.js保持原样。
/www/js/index.js is left as it is.
页面流应为： app starts - > index.html - >从indexB.js加载MainPage.html - > MainPage.html
但是所有的css没有加载。
page flow should be: app starts -> index.html -> loads MainPage.html from indexB.js -> MainPage.html but all css don't get loaded.
当我从index.html中删除body onload =init（）;'，并将mainPage.html复制并放到index.html的body上时，问题。
When i remove 'body onload="init();"' from index.html and copy&past MainPage.html onto index.html's body, css works with no problem.
从这里，我检查所有的css路由是正确的。
From this, i checked that all the css routes are correct.
/www/index.html
/www/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="jqmobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="jqmobile/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="jqmobile/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/MainPage.css">
<script src="js/index.js"></script>
<script src="js/indexB.js"></script>
</head>
<body onload="init();">
<div data-role="page">
</div>
</body>
</html>
/www/js/indexB.js
/www/js/indexB.js
var pagesHistory = [];
var currentPage = {};
var path = "";
function init(){
$("div[data-role='page']").load(path + "pages/MainPage.html", function(){
$.getScript(path + "js/MainPage.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
/www/pages/MainPage.html
/www/pages/MainPage.html
<script>
$.getScript(path + "js/MainPage.js");
</script>
<div id="header-wrapper">
<div data-role="navbar" id="navBar">
<ul id='navBarUl'>
<li>
<a href="#" data-role="tab" data-icon="user" data-transition="none" class="fastClick">Friends</a>
</li>
<li>
<a href="#" data-role="tab" data-icon="clock" data-transition="slideup" class="fastClick ui-btn-active ui-state-persist">Main</a>
</li>
<li>
<a href="#" data-role="tab" data-icon="gear" data-transition="none" class="fastClick">Settings</a>
</li>
</ul>
</div>
</div><!--header-wrapper ends-->
<div id="content-wrapper">
.........
</div><!--content-wrapper ends-->
<div data-role="footer" data-position="fixed" data-theme="a">
</div><!--footer ends-->
/www/js/MainPage.js
/www/js/MainPage.js
currentPage = {};
currentPage.init = function() {
$.getScript(path + "css/MainPage.css");
};
/www/css/MainPage.css
/www/css/MainPage.css
.navBtns {
display: block;
clear: both;
}
.......
a#mine{
background-color: #fdedb1;
}
推荐答案
MainPage.js？我猜这不是因为它超出范围。通过放置alert（path）来测试它;在MainPage.js中。
Is the variable path defined in MainPage.js? I'm guessing it's not as it's out of scope. Test it by putting alert(path); in MainPage.js.
这篇关于$ .getScript和css问题与phonegap和jquery手机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
