这是我的文件。
/www/js/index.js 保持原样。
页面流应该是:应用启动 -> index.html -> 从 indexB.js 加载 MainPage.html -> MainPage.html 但所有的 CSS 都没有加载。
当我从 index.html 中删除 'body onload="init();"' 并将 MainPage.html 复制并粘贴到 index.html 的正文中时，CSS 可以正常工作。
据此，我检查了所有的 css 路由是否正确。
/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
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
<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
currentPage = {};
currentPage.init = function() {
$.getScript(path + "css/MainPage.css");
};
/www/css/MainPage.css
.navBtns {
display: block;
clear: both;
}
.......
a#mine{
background-color: #fdedb1;
}
最佳答案
MainPage.js中是否定义了可变路径？我猜这不是因为它超出了范围。通过放置警报(路径)进行测试；在 MainPage.js 中。
关于jquery - phonegap 和 jquery mobile 的 $.getScript 和 css 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28807740/