Question

我正在使用jquery mobile而我正在处理一个问题：

我有2个html页面：index.html和page.html

//index.html
...
<script src="script.js"></script>
<body>
<div id='contents'></div>
</body>
...

//script.js
$(document).ready(function(){
   $.ajax({
      ...
       success:
       $("#contents").html(content_to_display).trigger('create');
       ...
   });
});

和另一个调用上一个

的页面

//page.html

...
<body>
<a href="index.html" data-icon="arrow-l" data-role="button">Back</a>
</body>
...

问题是，当我点击“返回”按钮（刷新page.html之后）后，页面index.html会正确显示，除非我手动刷新页面（F5或Ctrl+R）显示我想要显示的内容。

如何加载index.html页面而不必每次都手动刷新页面？

Answer 1

刷新是你的问题，这是发生的事情的时间表：

index.html 已加载
页面已更改为 page.html ，其正文内容已加载到 index.html DOM 但链接仍然是 domain/page.html
由于整页翻新，重新加载 page.html 而 HEAD index.html >
页面已更改为 index.html ，其正文内容已加载到 page.html DOM 没有 HEAD 部分，这就是javascript未被触发的原因

如果 index.html 和 page.html 具有相同的 HEAD 内容，则会解决此问题，主要引用相同的自定义js文件。有关此问题的更多解决方案（使用解决方案）请查看此 ARTICLE ，以便更透明，这是我的个人博客。或者可以找到 HERE 。

Answer 2

我认为你正在寻找类似的东西：

 window.onbeforeunload = function () {
     // stuff do do before the window is unloaded here.
 }

在用户导航离开当前页面之前运行。

这意味着您可以强制用户导航到正确刷新的页面。

Answer 3

如果您只是向后导航一页，请尝试使用此按钮而不是后退按钮：

<a href="javascript:history.go(-1)">BACK</a>

或者试一试：

$.mobile.changePage(href, {changeHash: false });

单击<a> link</a>后未调用$ .ajax函数

3 个答案: