phonegap 和 jquery mobile 的 $.getScript 和 css 问题答案

【问题标题】：$.getScript and css issue with phonegap and jquery mobilephonegap 和 jquery mobile 的 $.getScript 和 css 问题
【发布时间】：2015-03-02 10:39:40
【问题描述】：

这是我的文件。

/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;
}

【问题讨论】：

标签： jquery css cordova jquery-mobile

【解决方案1】：

变量路径是否定义在 MainPage.js 中？我猜这不是因为它超出了范围。通过放置 alert(path); 来测试它在 MainPage.js 中。

【讨论】：