Javascript jQuery在Phonegap中加载本地html文件_Javascript_Jquery_Html_Css_Cordova

Javascript jQuery在Phonegap中加载本地html文件

javascript jquery html css cordova

Javascript jQuery在Phonegap中加载本地html文件,javascript,jquery,html,css,cordova,Javascript,Jquery,Html,Css,Cordova,我正在创建多页手机gap应用程序我有基本的结构，包括css和index.html中的脚本，我试图从其他html页面将内容动态加载到容器中当我加载其他动态页面的内容时，css不会反映在页面上我在本地有样式表，但加载后该样式表仍然没有应用于login.html 任何一个项目的样式表cdn路径脚本cdn路径 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

我正在创建多页手机gap应用程序

我有基本的结构，包括css和index.html中的脚本，我试图从其他html页面将内容动态加载到容器中

当我加载其他动态页面的内容时，css不会反映在页面上

我在本地有样式表，但加载后该样式表仍然没有应用于login.html

任何一个项目的样式表cdn路径

脚本cdn路径

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Login</title>
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/ej.mobile.all.min.css" rel="stylesheet" />

    <link href="css/index.css" rel="stylesheet" />


</head>
<body>
    <div data-role="appview">
        <div id="header" data-role="ejmheader" data-ej-title="Leap Agent Portal"></div>

        <div id="content"></div>
    </div>
    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/jquery-2.1.1.min.js"></script>
    <script src="scripts/jquery.validate.min.js"></script>
    <script src="scripts/jsrender.js"></script>
    <script src="scripts/ej.mobile.all.min.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script>


var loadPage = function(url) {
    $.ajax({
        url: url,
    }).done(function (data) {
        $("#content").html(data);
    });
}

(function () {
    "use strict";

    document.addEventListener('deviceready', onDeviceReady.bind(this), false);

    function onDeviceReady() {
        loadPage("views/login.html");
    };
})();

    </script>

</body>
</html>

<form id="loginform" method="post">
    <h1>Enter Login Credentials</h1>
    <br />
    User Name
    <input type="text" required id="username" name="username"><br>
    <br />
    Password
    <input type="password" required id="password" name="password">
    <div align="center">
        <button type="submit" data-role="ejmbutton" data-ej-contenttype="textimage" data-ej-rendermode="auto"
                data-ej-imageclass="fa fa-key" id="btnlogin">
            Login
        </button>
    </div>
    <div id="message"></div>
</form>


登录
var loadPage=函数（url）{
$.ajax({
url:url，
}).完成（功能（数据）{
$（“#content”）.html（数据）；
});
}
（功能（）{
“严格使用”；
document.addEventListener（'devicerady'，ondevicerady.bind（此），false）；
函数ondevicerady（）{
loadPage（“views/login.html”）；
};
})();

login.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Login</title>
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/ej.mobile.all.min.css" rel="stylesheet" />

    <link href="css/index.css" rel="stylesheet" />


</head>
<body>
    <div data-role="appview">
        <div id="header" data-role="ejmheader" data-ej-title="Leap Agent Portal"></div>

        <div id="content"></div>
    </div>
    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/jquery-2.1.1.min.js"></script>
    <script src="scripts/jquery.validate.min.js"></script>
    <script src="scripts/jsrender.js"></script>
    <script src="scripts/ej.mobile.all.min.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script>


var loadPage = function(url) {
    $.ajax({
        url: url,
    }).done(function (data) {
        $("#content").html(data);
    });
}

(function () {
    "use strict";

    document.addEventListener('deviceready', onDeviceReady.bind(this), false);

    function onDeviceReady() {
        loadPage("views/login.html");
    };
})();

    </script>

</body>
</html>

<form id="loginform" method="post">
    <h1>Enter Login Credentials</h1>
    <br />
    User Name
    <input type="text" required id="username" name="username"><br>
    <br />
    Password
    <input type="password" required id="password" name="password">
    <div align="center">
        <button type="submit" data-role="ejmbutton" data-ej-contenttype="textimage" data-ej-rendermode="auto"
                data-ej-imageclass="fa fa-key" id="btnlogin">
            Login
        </button>
    </div>
    <div id="message"></div>
</form>


输入登录凭据


用户名




密码
登录

如果我将所有内容都写在单页上而不加载，则样式表正在渲染

如果使用jquery加载，则不会呈现任何样式

您是否尝试过safari development inspector来检查您的DOM/CSS？有时会有帮助，-）

是否需要样式表

index.css

？。尝试删除它并检查它是否工作。