【问题标题】:how to reload a page with ?parameter=only link and replace the current anchor page in Jquery Mobile?如何使用?parameter=only 链接重新加载页面并替换 Jquery Mobile 中的当前锚页面?
【发布时间】:2026-02-17 11:25:02
【问题描述】:

这听起来很复杂,不是吗……其实很简单:

我有一个多语言应用程序,更改语言需要重新加载页面。

我希望用户
a) 能够更改语言无需 rel="external"ing 链接(重新启动应用程序)
b) 从任何页面执行此操作,因此我的链接将仅包含语言参数 ?lang=EN

我一直在摆弄这个问题,还从 JQM devs 那里得到了一些帮助,并试图在 JQM 文档的动态页面上贴近这个 example

以下解决方案效果一般。请参阅下面的问题:

$(document).on( "pagebeforechange.lang", function( e, data ){
    // just strings
    if (typeof data.toPage === "string") {  
        if (data.toPage.indexOf("?lang=") > -1) {
            console.log("language change")
            // stop here
            e.preventDefault();
            e.stopPropagation();

            var toUrl = $.mobile.path.parseUrl( data.toPage );
                viewSwitch  = toUrl.search.replace( /.*lang=/, "" ),
                form = "",
                service = "some_coldfusion_cfc_to_load_new_language.cfc",
                method = "locale",
                returnformat = "JSON",
                targetUrl = toUrl.filename,
                // fake submit
                formdata = "form_submitted=lang&viewSwitch="+viewSwitch+"&method="+method+"&returnformat="+returnformat,
                successHandler = function() {       

                    alert("changed language successfully")
                    // now we changepage
                    $.mobile.changePage( targetUrl, { 
                        reloadPage: true,
                        transition: "fade",
                        allowSamePageTransition: true
                        });
                    };
            // send AJAX to update language server side    
            // page will reload on success
            ajaxFormSubmit( form, service, formdata, targetUrl, successHandler );
            }
        } 
    });

好的。这可行,但是...该页面作为新页面添加到 DOM(使用 data-external-page="true",因此当我单击下一页时,该页面将被删除。

问题
如何使这个重新加载的页面成为新的“锚”页面=留在 DOM 中的页面?我可以删除 data-external-page,但我还需要做什么?设置基地?...

感谢任何提示!

【问题讨论】:

    标签: javascript jquery jquery-mobile refresh multilingual


    【解决方案1】:

    只要您重新加载外部页面(不是多页模板的伪页面),您就可以使用$.mobile.changePage() 轻松地重新加载页面:

    $.mobile.changePage('myPage.cfm?lang=EN', {
        reloadPage : true
    });
    

    这将从您的服务器请求一个新页面,该页面可以以所选的任何语言输出内容,然后在 DOM 中删除此页面的当前版本,最后将新版本添加到 DOM。

    reloadPage 标志的文档:http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

    【讨论】:

    • 这是一个外部页面,但如果我只有一个类似 ?lang=EN(没有 myPage.cfm)的链接,JQM 不会删除原始页面,这是我开始的问题 - 它再次将其添加到 DOM,因此我在 DOM 中拥有同一页面的德语和英语版本。我可以恢复使用 Coldfusion #CGI.PATH#+lang=EN,它将当前路径插入到链接中,因此模板中的链接将是灵活的),但我认为必须有一种方法可以仅执行此 JQM。至少只提供链接参数应该告诉 JQM “嗯,也许这是同一页 :-)”。在 ?para=only... 上尝试 $.mobile.path.parseUrl...
    • 有点晚了...我坚持使用临时解决方案,并且在 DOM twiche 中有相同的页面。一种是默认语言,另一种是用户在更改语言时加载的。我将语言保留在服务器上,因此当用户转到另一个页面时,我翻译的起始页面将被替换为翻译后的“另一个页面”。如果我找到一种方法来用没有 rel=external 的翻译页面替换默认语言页面,我会重新发布。像往常一样,感谢您的宝贵意见!
    最近更新 更多