个人中心
gpt4 book ai didi

jquery-mobile - javascript 在 $.mobile.changePage() 之后停止工作

转载 作者：行者123 更新时间：2023-12-03 12:18:54 25 4
gpt4 key购买 nike

我有两个页面: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>

最佳答案

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

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

您还可以将每个页面的 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>

关于jquery-mobile - javascript 在 $.mobile.changePage() 之后停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9728736/

25 4 0
文章推荐： javascript - axios报错转换后的数据必须是字符串、ArrayBuffer、Buffer或Stream
文章推荐： javascript - 选中/取消选中 radio
文章推荐： javascript - 使用 javascript 在循环中插入 JSON 值
文章推荐： codeigniter - 如何使用基本设计样式创建母版页(布局)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com