Question

我有两个页面：index.html和main.html

当我将main.html页面设置为我的应用程序的默认页面时，java脚本可以正常工作，但是当我将index.html设置为主要页面时，在重定向之后，main.html上的javascript停止工作。

这是两页的HTML：

的index.html

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>      

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
    /* App custom styles */
</style>
<script src="jquery.mobile-1.0.1/jquery.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
<script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>

$.mobile.allowCrossDomainPages = true; 
$.mobile.ajaxLinksEnabled = false; 

 function onLoad(){
    document.addEventListener("deviceready", onDeviceReady, true);
 }
 function onDeviceReady(){
    // request the persistent file system
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, null);
 }


function onSuccess(fileSystem) {       
    fileSystem.root.getFile("kuapodata.xml", null, gotMe, failFile);
}


// se o arquivo não existir
 function failFile(error) {
    $("#formLogin").show();
 }


// se o arquivo existir
function gotMe(fileEntry) {
    $.mobile.changePage("main.html", null, false, false);       
}



</script>
</head>
<body onload="onLoad();">

   <div data-role="page" id="page1">
        <div data-theme="a" data-role="header">
            <h3>
                Header
            </h3>
        </div>
        <div data-role="content" id="formLogin">
            <form id="loginFrm">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textinputEmail">
                        </label>
                        <input id="textinputEmail" placeholder="email" value="" type="email" />
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="textinputPassword">
                        </label>
                        <input id="textinputPassword" placeholder="senha" value="" type="password" />
                    </fieldset>
                </div>
                <input value="entrar" type="submit" />
            </form>
        </div>

    </div>


<script>
var xml;



function gotFS(fileSystem) {
    fileSystem.root.getFile("kuapodata.xml", {create: true, exclusive: false}, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {
    fileEntry.createWriter(gotFileWriter, fail);
}

function gotFileWriter(writer) {
         writer.write(xml);
}

function fail(error) {
    alert(error.code);
}



// ao fazer o login
$("form").submit(function() {
    // chama função que valida usuário
    ValidateUser();
    return false;
});


// verifica se o usuário existe
function ValidateUser(email, password) {
    $.ajax({
    type: 'POST',
        url: 'http://********/oauth.aspx',
        data: "email=" + $("#textinputEmail").val() + "&password=" +  $("#textinputPassword").val(),
        success: function(data) {
            // se o usuário existir
            if (data != "false") {
                xml = data;

                // cria o arquivo xml se ainda não existir
                window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

                // muda o usuário de  página
                $.mobile.changePage("main.html");
            }
            else {
                alert("Dados inválidos. Tente novamente.");
            }
        }
    });
}

</script>

 </body>
 </html>

main.html

    <!DOCTYPE HTML>
<html>
  <head>
        <title>PhoneGap</title>


    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
    <style>
        /* App custom styles */
    </style>
    <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>  
    <script src="jquery.mobile-1.0.1/jquery.min.js"></script>
    <script src="jquery.mobile-1.0.1/jquery.validate.min.js"></script>
    <script src="jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>

    <script>

$(document).ready(function() {
   alert("yesss");
});





  </script>
  </head>
  <body>

       <div data-role="page" id="page1">
            <div data-theme="a" data-role="header">
                <h3>
                    Header
                </h3>
            </div>
            <div data-role="content" id="main">

            </div>

        </div>


  </body>
</html>

Answer 1

jQuery Mobile通过AJAX拉入远程页面。当它执行此操作时，它只会拉入它找到的第一个data-role="page"元素。这意味着data-role="page"元素之外的任何内容都将被丢弃。

最好的解决方法是将所有应用程序的JS放入custom.js文件并将其包含在每个页面的头部，这样您网站的所有代码始终可用（为此，请执行此操作将需要使用事件委托）。

您还可以将每个页面的JS放在data-role="page"元素中，以便jQuery Mobile抓住它，而不仅仅是丢弃：

   <div data-role="page" id="page1">
        <script>
            alert('hello');
        </script>
        <div data-theme="a" data-role="header">
            <h3>
                Header
            </h3>
        </div>
        <div data-role="content" id="main">

        </div>

    </div>

javascript在$ .mobile.changePage（）之后停止工作

1 个答案: