Jquery mobile如何在changePage之后强制目标页面刷新

时间:2012-09-28 20:38:11

标签: javascript jquery jquery-mobile

有没有办法在changePage之后刷新目标页面。

我真的在搜索,但没有任何对我有用。

2 个答案:

答案 0 :(得分:3)

这可能是您(或其他人)真正想要的:

data-ajax="false"

<a href="/" data-ajax="false">
    <img id="mainLogo" src="logo.svg" width="215" />
</a>

这将绕过ajax行为。

  

Linking without Ajax

     

指向其他域或具有rel =&#34; external&#34;的链接,   数据AJAX =&#34;假&#34;或者目标属性不会被Ajax加载。   相反,这些链接将导致整页刷新而没有动画   过渡。这两个属性(rel =&#34; external&#34;和data-ajax =&#34; false&#34;)   具有相同的效果,但具有不同的语义含义:rel =&#34; external&#34;   应该在链接到另一个站点或域时使用   数据AJAX =&#34;假&#34;对于简单地选择您的页面非常有用   通过Ajax加载域。由于安全限制,   框架总是选择从Ajax中链接到外部域   行为。

答案 1 :(得分:1)

尝试以下解决方案之一:

1 - 使用$(location).attr('href',"your_html.html");

示例:

由于您使用的是单页模板,我们假设您在两个单独的HTML文件(#page_1和{{1}中有两个jQuery Mobile页面(#page_2page_1.html) })。

如果您想从page_2.html(位于#page_1)导航到page_1.html(位于#page_2),您可以使用:

page_2.html

请查看以下完整示例:

- $(location).attr('href',"page_2.html");

page_1.html

- <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <script> $(function() { $("#mlink").click(function() { $(location).attr('href',"page_2.html"); }); $("#mlink_2").click(function() { $(location).attr('href',"page_1.html"); }); }); </script> </head> <body> <div id="page_1" data-role="page"> <div data-role="content"> PAGE 1<br> <!-- WHEN CLICKING ON THIS LINK, YOU'LL GO TO #page_2 in page_2.html WITH PAGE REFRESH --> <a id="mlink">GO TO PAGE 2</a> </div> </div> </body> </html>

page_2.html

2 - 尝试使用<html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <script> $(function() { $("#mlink").click(function() { $(location).attr('href',"page_2.html"); }); $("#mlink_2").click(function() { $(location).attr('href',"page_1.html"); }); }); </script> </head> <body> <div id="page_2" data-role="page"> <div data-role="content"> PAGE 2<br> <!-- WHEN CLICKING ON THIS LINK, YOU'LL GO TO #page_1 in page_1.html WITH PAGE REFRESH --> <a id="mlink_2">GO TO PAGE 1</a> </div> </div> </body> </html>

考虑到上一个示例,并假设您要从$.mobile.changePage("your_html.html", { reloadPage: true });导航到#page_1,您只需将方法#page_2替换为:

$(location).attr('href',"page_2.html");

有关方法$.mobile.changePage("page_2.html", { reloadPage: true }); 及其选项$.mobile.changePage()的详细信息,请查看以下链接:http://jquerymobile.com/demos/1.1.0/docs/api/methods.html