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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 16:46:14  来源:igfitidea点击:

Jquery mobile how to force target page refresh after changePage

javascriptjqueryjquery-mobile

提问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_1and #page_2) in 2 separate HTML files (page_1.htmland page_2.html).

由于您使用的单页模板,让我们假设你有两个jQuery Mobile的页面(#page_1#page_22个独立的HTML文件()page_1.htmlpage_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_1to #page_2, you'd simply have to replace the method $(location).attr('href',"page_2.html");with:

考虑前面的示例,并假设您要从#page_1to导航#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 行为。

Linking without 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 的链接

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