jQuery Mobile 更改页面答案

【问题标题】：JQuery Mobile changePagejQuery Mobile 更改页面
【发布时间】：2011-11-16 14:27:50
【问题描述】：

我正在设计一个 JQuery Mobile 应用程序并在那里遇到一个问题，我有两个页面，page1.aspx 和page2.aspx，我必须从page1 重定向到page2。目前我正在使用window.location.href 进行重定向，但它也在地址栏中显示加载。

为了避免这种情况，我想使用$.mobile.changePage。

问题：

现在在重定向之前，我在localStorage 变量中设置一个值，基于page2.aspx 的加载事件的这个值我必须绑定页面。它与window.location.href 一起工作正常，但在使用$.mobile.changePage 时，它正在重定向，但如果我刷新它正在加载的页面，在到达page2.aspx 后加载事件不会触发。所以我的问题是在显示 page2.aspx 加载事件时必须触发。

谁能告诉我为什么 page2.aspx 在使用 $.mobile.changePage 时没有加载？

如果有人知道解决办法，请尽快回复，非常紧急。

提前致谢。

Page1.aspx：

localStorage.setItem("pageCode", "NULLException");
//$.mobile.changePage("../MessageDialog.aspx", "slide", true, true);
$.mobile.changePage("../MessageDialog.aspx", { transition: "slide", changeHash: true, reverse: false });

Page2.aspx：

 $('div').live("pageshow", function () {
     if (localStorage.getItem("pageCode") != null) {
         if (localStorage.getItem("pageCode") == "NullException") {
                    $('#lblDialogHeader').text("Error");
                    $('#lblDialogMessage').text("Sorry");
                    document.getElementById("btnOK").setAttribute("onclick", 'Test()');
                }
    }
}

HTML

<div data-theme="c" data-role="page" id="test">
        <div data-role="header" data-theme="b">
            <h1><label id="lblStatus">Status</label></h1> 
        </div>
        <div data-role="content" data-theme="b">
        <h3><label id="lblDialogHeader"></label></h3>
            <p><label id="lblDialogMessage"></label></p>
        </div>
         <div data-role="footer" data-theme="b">
            <div data-role="navbar">
                <ul>
                   <a href="#" data-role="button" id="btnOK" data-icon="check">OK</a>       
                    <a href="#" data-role="button"  id="btnCancel"   data-rel="back" data-icon="delete" >Cancel</a>    
                </ul>
            </div>
        </div>
    </div>

【问题讨论】：

unable to load dynamic listview in jquery mobile 的可能重复项——我今天刚刚回答了同样的问题

标签： jquery jquery-mobile

【解决方案1】：

似乎当您调用changepage 指定转换时，第二页似乎被“注入”到第一页中。您可以轻松查看，因为$(document).ready(function(){}) 在第二页中不起作用。

我在 Windows Phone 7 应用程序中使用 Cordova，我将脚本 location.href 更改为使用 $.mobile.changepage()，但出现了这个问题：我想要第二页触发任何加载事件，但没有工作（pageshow、pagechange、pagebeforechange、正文onload、$(document).ready 等）。

以下是我目前的发现，可能会对您和其他人有所帮助：

index.html是我的起始页如下

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

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">
    <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript">
        function callSecondPage() {
            //save my scroll position in index page
            var top = $(window).scrollTop();
            window.sessionStorage.setItem('top', top);
            //go to the second page
            $.mobile.changePage("secondpage.html", { transition: "slide", changeHash: true, reloadPage :true }); 

  </script>
  <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.1.min.css" />
  </head>
  <body onload="onLoad()">
      <div class="my-page" data-role="page" data-title="My App Title" data-theme="a"> 
          <div class="header" data-role="header"> 
              <img src="img/title.png" />
          </div><!-- /header -->
          <div data-role="content"> 
              <div class="my-logo">
                <img src="img/logo.png"/>
              </div>

              <div class="my-content">
            some stuff here
            <a href="#" onclick="callSecondPage()">Call second page</a>

              </div>
          </div>
  </body>
  </html>

现在可以使用 secondpage.html。了解无法使用pagechange 或$(document).ready，我们注意到我们可以使用pageinit 来模拟“页面加载”。

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

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">

    <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
    <script type="text/javascript">
        function onLoad() {
            //LOL! this does not work using $.mobile.changepage as caller
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        // Cordova is loaded and it is now safe to make calls Cordova methods
        //
        function onDeviceReady() {
            //LOL! this will never run using $.mobile.changepage as caller
            // Now safe to use the Cordova API
            var top  = sessionStorage.getItem('top');            
        }

    </script>
  </head>
  <body onload="onLoad()">
      <div class="my-second-page" data-role="page" data-title="App Title" data-theme="b"> 
      <script type="text/javascript">
          $(".my-second-page").live('pageinit', function () {
              //LOL! Hey this WORKS! I can see an output in Visual Studio!
              console.log('************************* pageinit');
              console.log('************************* '+ sessionStorage.getItem('top'));
          });
          $(".my-second-page").live('pagechange', function () {
              //LOL! Again, this is not going to work, well, it does not print an output in Visual Studio!
              console.log('************************* pagechange');
              console.log('************************* ' + sessionStorage.getItem('top'));
          });
        </script>
          <div data-role="header"> 
              <h1>App title</h1>
          </div><!-- /header -->
          <div data-role="content"> 
              <div class="my-content">
                   your stuff here for second page                      
              </div>
              <p>
              <a href="index.html" data-role="button" data-theme="b" data-transition="flip" rel="external" data-icon="back" data-iconpos="left" data-inline="true">Back</a>
              </p>
          </div>

          <div data-role="footer" class="ui-footer" data-position="fixed">
            <h1>My footer</h1>
          </div>
      </div>
  </body>
</html>

这是一个真正的工作示例，如果有人需要，我可以分享一个示例项目。

【讨论】：

你能检查一下这个吗？天呐！ stackoverflow.com/questions/14236448/…

【解决方案2】：

事件与changePage不同，因为该方法对新的url进行Ajax调用，这与window.location.href中的直接调用不同

你试过这个方法吗：

$('div').live("pageshow", function()
{
   //your code
});

编辑：查看 JQuery Mobile 页面，我看到页面更改后触发了事件。

http://jquerymobile.com/test/docs/api/events.html

【讨论】：

嗨，是的，我也尝试过这种方式，但没有成功，如果可能的话，您能否发布一个相同的工作示例代码
嗨，我添加了一个链接，您可以在其中看到页面更改时触发的事件。我的应用程序也在使用我在答案中发布的代码并且工作正常。希望你能做到它工作
嗨，感谢分享此链接，但我已经尝试了所有这些事件，但它们都没有在加载时执行，刷新后一切正常，
第二页调用changePage和js的时候能不能加代码？
Page1: localStorage.setItem("pageCode", "NullException"); $.mobile.changePage("../MessageDialog.aspx", "slide", true, true);