Question

我正在尝试编写一个包含多个内部页面的简单应用程序。从#page2开始，我想返回#page1并重新加载，以便javascript生成的内容会刷新。

<body>
<div id="page1" data-role="page">
    <script type="text/javascript">
    //Javascript spits out something new every time
    </script>
</div>

<div id="page2" data-role="page">
    <a id="page1button" href="page1" data-role="button">go to page1</a>
</div>
</body>

我能做到这一点的唯一方法是将rel="external"添加到#page1button。内容刷新，但有一个突然的页面重新加载不性感。有没有办法实现相同的结果，但仍然使用jqm的过渡？

我知道这是一个很受欢迎的问题，我已经做了很多研究，包括the jqm documentation on changing pages，但我尝试过的任何东西似乎都没有用。 $.mobile.changePage()似乎有一个选项：reloadPage:true声称可以完全按照我的需要行事，但它不起作用。我甚至在$.mobile.loadPage()之前尝试.changePage()但仍然没有运气。救命啊！

更新

我很确定这不是缓存问题，因为这是我的页面元素的样子，并且每当我返回页面时它仍然显示相同的* $＃％＆amp; ing事物：

<div id="page2" data-role="page" data-cache="never" data-dom-cache="false"> ...

我认为只有在html页面加载时才会调用javascript块，而不是每次使用jqm返回到div。也许解决这个问题的方法是找出一种方法来强制该代码块再次运行。有什么想法吗？

更新

好消息：我找到了解决此问题的页面：http://jquerymobile.com/test/docs/pages/page-scripting.html

坏消息：它声称会起作用......

$( document ).delegate("#page1", "pageinit", function() { alert('RE-RUN JAVASCRIPT'); });

...不!!我把这个函数放在我的html文件的头部，它只运行一次。

更新

仍在努力解决这个问题。我在这里放了一些代码：http://dl.dropbox.com/u/28286159/index.html

为了简单起见，我只做了两页，其中一页包含<script>打印出来的页面：document.write(Math.random());

你会看到这个数字没有改变。

Answer 1

这是一个解决方案。你的#predict页面仍然在dom中，因为它的所有页面都是如此。所以是的，你的math.random代码只执行一次。只需将随机数绑定到“告诉我”按钮，然后使用点击生成的新随机数更新#prediction。

<script>
    $(function(){   
        $('#tellme').click(function(){       
            randomNumber = Math.random();
            $('#prediction').html(randomNumber);
            $.mobile.changePage('#predict', {transition:'pop'});
        });
    }); 
</script>
<section id="home" data-role="page">
    <div data-role="header">
        <h1 class="">HOME</h1>
    </div><!-- /header -->

    <div data-role="content">
        <div id="iknow">Here's a random number...</div>

        <a href="#" data-role="button" id="tellme">TELL ME!</a>

    </div><!-- /content -->
</section><!--#home-->
<section id="predict" data-role="page">
    <div data-role="header">
        <h1 class="">PREDICT</h1>
    </div><!-- /header -->

    <div data-role="content">

        <div id="prediction"></div>

        <a id="tryagain" href="#home" data-role="button" data-transition="pop">Try again.</a>

     </div><!-- #content -->
</section><!-- #predict -->

Answer 2

如果您希望页面转换工作，则需要预取外部页面。

<a href="prefetchThisPage.html" data-prefetch> ... </a>

文档继续这样说：

DOM大小管理

要使动画页面过渡工作，页面   你需要在DOM中转换和转换。然而，   将旧页面保存在DOM中可以快速填充浏览器的内存，并且   可能导致某些移动浏览器减速甚至崩溃。

文档：http://jquerymobile.com/test/docs/pages/page-cache.html

Answer 3

在这种情况下，“home”和“predict”页面最初都会加载到DOM中。

为了将浏览器DOM的大小保持在最低限度，jQuery Mobile 从DOM中自动删除任何动态加载的移动页面它已经过时了。 这仅适用于加载的移动网页动态地通过Ajax;已经在多页文档标记中的页面不是除去。

因此，您的预测页面将始终在DOM中提供。为了更新页面上的内容，更新内容并调用适当的刷新方法，以便jquery mobile将增强DOM。

Answer 4

使用 pageshow （或更好， pagebeforeshow ）代替pageinit。

pageinit只调用一次，以避免不必要的重新应用jQuery移动UI。每次显示页面时都会调用pageshow和pagebeforeshow，这就是您在案例中模拟页面刷新所需的内容。

进一步阅读： http://api.jquerymobile.com/category/events/

以下是快速视觉的索引修改： http://jsfiddle.net/tSYUK/

jQuery mobile：内部页面转换的新内容

更新

更新

更新

4 个答案: