Question

我有一个简单的函数，用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，因为我只需要在一种情况下加载页面）。

Answer 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/

Answer 2

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

正如您所发现的，$.mobile.changePage不起作用，它从服务器检索整个页面的新副本，而不仅仅是您要刷新的#page部分。由于缺乏更好的术语，我提出的工作使用了“模拟”刷新。

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

第1步 - 创建空白页

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

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

第2步 - 您的dettail（）函数

在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

        });

  });

我在专用网络上成功测试了此解决方案（因此我没有链接供您查看）。希望它能在您的项目中为您服务。如果不让我知道，我会看看我是否可以帮助你实现目标。

请记住，最好在每个页面上加载所有页面所需的所有头部/头部javascript代码（最好通过在所有页面上加载相同的外部js文件），因为头部中的js代码section仅从访问的第一页加载ONCE。您可能希望用户最初浏览page1，但除非您能保证，如果最初加载了第2页或第3页等，您的代码应该可以正常工作。

Answer 3

reloadPage:true仅适用于网页网址，而不适用于网页ID

因此：

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

不起作用

jQuery Mobile - 使用$ .mobile.changePage刷新页面

3 个答案: