javascript jquery mobile如何在changePage后强制刷新目标页面
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12647084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery mobile how to force target page refresh after changePage
提问by kosbou
Is there any way to refresh the target page after changePage.
有什么办法可以在changePage之后刷新目标页面。
I really search but nothing works for me.
我真的在搜索,但没有什么对我有用。
采纳答案by Littm
Try one of the following solutions:
尝试以下解决方案之一:
1 -Use $(location).attr('href',"your_html.html");
1 -使用$(location).attr('href',"your_html.html");
Example:
例子:
Since you're using single page template, let's suppose that you have two jQuery Mobile pages (#page_1
and #page_2
) in 2 separate HTML files (page_1.html
and page_2.html
).
由于您使用的单页模板,让我们假设你有两个jQuery Mobile的页面(#page_1
和#page_2
2个独立的HTML文件()page_1.html
和page_2.html
)。
If you want to navigate from #page_1
(which is in page_1.html
) to #page_2
(which is in page_2.html
), you'd use:
如果您想从#page_1
(在 中page_1.html
)导航到#page_2
(在 中page_2.html
),您可以使用:
$(location).attr('href',"page_2.html");
Check the complete example below:
检查下面的完整示例:
-page_1.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
:
-page_2.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_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>
2 -Try using $.mobile.changePage("your_html.html", { reloadPage: true });
2 -尝试使用$.mobile.changePage("your_html.html", { reloadPage: true });
Considering the previous example, and supposing that you want to navigate from #page_1
to #page_2
, you'd simply have to replace the method $(location).attr('href',"page_2.html");
with:
考虑前面的示例,并假设您要从#page_1
to导航#page_2
,您只需将该方法替换为$(location).attr('href',"page_2.html");
:
$.mobile.changePage("page_2.html", { reloadPage: true });
For more information about the method $.mobile.changePage()
and its option reloadPage
, check the following link: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html
有关该方法$.mobile.changePage()
及其选项的更多信息reloadPage
,请查看以下链接:http: //jquerymobile.com/demos/1.1.0/docs/api/methods.html
回答by Simon_Weaver
This may be what you (or others) are really looking for:
这可能是您(或其他人)真正要寻找的:
data-ajax="false"
data-ajax="false"
<a href="/" data-ajax="false">
<img id="mainLogo" src="logo.svg" width="215" />
</a>
This will bypass ajax behavior.
这将绕过 ajax 行为。
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
Ajax 不会加载指向其他域或具有 rel="external"、data-ajax="false" 或目标属性的链接。相反,这些链接将导致没有动画过渡的整页刷新。这两个属性(rel="external" 和 data-ajax="false")具有相同的效果,但语义不同:链接到另一个站点或域时应使用 rel="external",而 data-ajax=" false”对于简单地选择通过 Ajax 加载域中的页面非常有用。由于安全限制,框架总是选择链接到 Ajax 行为之外的外部域。