Question

我在jquery移动应用中动态生成页面。他们展示。问题是，如果用户点击动态生成页面上的重新加载按钮，将返回第一页。

这是一个例子。将以下文件另存为t.html

<!DOCTYPE html>
<html>
<head>
  <title>JQM latest - issue template</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
  <script>$(document).ready(function(){
    var newPage = '<div data-role="page" id="dynamic"><div data-role="header"><h1>Dynamic Page</h1></div><div class="ui-content"><ul><li>This page is dynamically generated.</li></ul></div></div>';
    $.mobile.pageContainer.append(newPage);
});
</script>
</head>
<body>

  <div data-role="page" id="homepage">
    <div data-role="header">
      <h1>Issue template</h1>
    </div><!-- /header -->
    <div class="ui-content">
      <ul>
        <li>We are on the Homepage</li>
        <li>Go to <a href="#static">static</a></li>
        <li>Go to <a href="#dynamic">dynamic</a></li>
      </ul>
    </div><!-- /content -->
  </div><!-- /page -->

  <div data-role="page" id="static">
    <div data-role="header">
      <h1>Static Page</h1>
    </div><!-- /header -->
    <div class="ui-content">
      <ul>
        <li>This page is in the index.html.</li>
      </ul>
    </div><!-- /content -->
  </div><!-- /page -->

</body>
</html>

然后

在浏览器中加载t.html
点击“静态”，网址现在为t.html＃static，您将看到该页面
重新加载页面（单击浏览器的重新加载页面按钮），您仍会看到#static
返回t.html
点击“动态”，网址现在为t.html #dynamic，您将看到该页面
重新加载页面（浏览器重新加载按钮），您现在回到主页index.html，但网址仍显示t.html #dynamic

如何在用户重新加载（步骤6）动态页面时将其保留在该页面上？

Answer 1

问题在于，当您重新加载时，整个页面都是从头开始创建的，并且在该脚本运行之前动态内容不存在。

您可以这样做：

$(document).on("pageinit", "#homepage", function(){        
    var newPage = '<div data-role="page" id="dynamic"><div data-role="header"><h1>Dynamic Page</h1></div><div class="ui-content"><ul><li>This page is dynamically generated.</li></ul></div></div>';
    $.mobile.pageContainer.append(newPage);

    if (window.location.hash == "#dynamic"){
        setTimeout(GoToDynamicPage, 50);
    }

});

function GoToDynamicPage(){
    $.mobile.changePage("#dynamic");
}

在pageinit上，检查URL哈希，如果它是动态页面的id，请使用changePage（）去那里。在重新加载动态页面之前，用户可能会暂时看到主页。似乎需要setTimeout让jQM完成其业务......

这是 DEMO

在小提琴中，访问动态页面，然后右键单击并重新加载框架。

Answer 2

在ezanker的回复指导下，我去了文档，看看是否有办法在整个页面创建时推迟。有，将mobile.autoInitializePage设置为false，然后在需要时调用initializePage()。这就是我的解决方案。

这样，没有任意超时。当我点击重新加载按钮时，动态页面是唯一显示的页面。

<!DOCTYPE html>
<html>
<head>
  <title>JQM latest - issue template</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">

  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script>
   $(document).bind("mobileinit", function () {
      console.log('mobileinit called');
     $.mobile.autoInitializePage = false;
    });
</script>
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
  <script>$(document).ready(function() {
    console.log('document ready');
    var newPage = $('<div data-role="page" id="dynamic" data-url="yay"><div data-role="header"><h1>Dynamic Page</h1></div><div class="ui-content"><ul><li>This page is dynamically generated.</li></ul></div></div>');
    newPage.appendTo($('body'));
    $.mobile.initializePage();
});
</script>

</head>
<body>

  <div data-role="page" id="homepage">
    <div data-role="header">
      <h1>Issue template</h1>
    </div><!-- /header -->
    <div class="ui-content">
      <ul>
        <li>We are on the Homepage</li>
        <li>Go to <a href="#static">static</a></li>
        <li>Go to <a href="#dynamic">dynamic</a></li>
      </ul>
    </div><!-- /content -->
  </div><!-- /page -->

  <div data-role="page" id="static">
    <div data-role="header">
      <h1>Static Page</h1>
    </div><!-- /header -->
    <div class="ui-content">
      <ul>
        <li>This page is in the index.html.</li>
      </ul>
    </div><!-- /content -->
  </div><!-- /page -->

</body>
</html>

重新加载动态生成的页面会导致返回jquery mobile中的第一页

2 个答案: