0

我有一个简单的功能，可以用 jquery mobile 打开一个页面；页面结构是这样的：

$(document).on('pageinit','#page', function(){

 //all script

});

我的功能：

function dettail(id) {
  //alert(id);
  localStorage.setItem("id", id);
  var url = "#page";
  $.mobile.changePage( url, {transition: "none", reloadPage:true} );
}

此函数不加载#page；“reloadPage：true”为什么不起作用？

ps（我使用了 pageinit 而没有使用 pageshow，因为我只需要在一种情况下加载页面）。

4

3 回答 3

1

如果我正确理解了您的问题，则您正在尝试仅刷新多页布局中的特定 #page 部分。

正如您所发现的$.mobile.changePage那样，它不会那样工作，它会从服务器检索整个页面的新副本，而不仅仅是您要刷新的#page 部分。我想出的工作使用“模拟”刷新，因为没有更好的术语。

以下将引导您完成模拟刷新的设置/使用：

第 1 步 - 创建一个空白页面

将以下 html 代码放入多页面布局的 body .. /body 部分

 <div data-role="page" id="empty_page_content" data-theme="b" data-content-theme="b"></div>

第 2 步 - 您的 detail() 函数

在 head .. /head 部分（或该部分加载的外部 js 文件）中，在加载 jquery 移动库之前，放置您的 dettail 函数，编写如下：

 function dettail(id){

       localStorage.setItem("id", id);

        //emulate a refresh by switching to an empty page div (and then back to this  page again)
        $.mobile.changePage(
          '#empty_page_content',
          {
             allowSamePageTransition : true,
             transition              : 'none',
             showLoadMsg             : false,
             reloadPage              : false
       }
    );
  }

第 3 步 - 在 #empty_page_content 页面上设置 pageshow 事件

在head ... /head部分（或该部分加载的外部js文件）中，在加载jquery移动库之前，放置以下js代码：

 $(function() {

        $(document).on("pageshow", "#empty_page_content", function() {
            //console.log('pageshow event - #empty_page_content only');

            // return to #page whenever this page is loaded
            // The return url is hardcoded in this example but it could be switched to a variable if different return pages are needed



            $.mobile.changePage(
              '#page',
              {
                allowSamePageTransition : true,
                transition              : 'none',
                showLoadMsg             : false,
                reloadPage              : false
               }
            );

        });

 });

第 4 步 - 每次显示时在您的#page 中执行操作

在head ... /head部分（或该部分加载的外部js文件）中，在加载jquery移动库之前，放置以下js代码：

 $(function() {

        $(document).on("pageshow", "#page", function() {
            //console.log('pageshow event - #page');
            // .. do stuff here, such as look for a stored id value and update the content of the #page accordingly

        });

  });

我在专用网络上成功测试了这个解决方案（所以我没有链接供您查看）。希望它会在您的项目中为您工作。如果不让我知道，我会看看我能不能帮你搞定。

请记住，最好在每个页面上加载所有页面所需的所有 head .. /head javascript 代码（最好通过在所有页面上加载相同的外部 js 文件来完成），因为 head 部分中的 js 代码仅曾经从访问的第一页加载一次。您可能打算让用户最初浏览第 1 页，但除非您可以保证如果第 2 页或第 3 页等最初被加载，您的代码应该可以工作。

于 2013-07-31T19:53:12.973 回答
1

尝试使用该allowSamePageTransition选项，即：

$.mobile.changePage(
  window.location.href,
  {
    allowSamePageTransition : true,
    transition              : 'none',
    showLoadMsg             : false,
    reloadPage              : true
   }
);

取自http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/

于 2013-07-31T07:49:39.143 回答
0

reloadPage:true仅适用于页面 url，不适用于页面 id

所以：

$.mobile.changePage("#page", {
    transition : "fade",
    reverse : false,
    changeHash : false,
    allowSamePageTransition : true,
    reloadPage:true
});

不管用

于 2013-10-30T10:57:09.273 回答