我如何知道 jQuery 移动版正在加载哪个页面？

Question

在学习 JQM 时，我发现 JQM 不像普通浏览器那样加载页面。它只是获取内容并更新 DOM.

When the requested page loads, jQuery Mobile parses the document for an element with the data-role="page" attribute and inserts that code into the DOM of the original page.

我混合使用物理页面和 JQM 页面。使用 PHP 加载页面，我的模板代码如下所示：

include('views/widgets/head.php');
include($view);
include('views/widgets/footer.php');

视图与 PHP 页面相同。

首页
URL: mysite.com
页数：#frontPage

B页
URL: 我的网站.com/page-b
页面：#listPage、#infoPage、#mapPage

C页
URL: 我的网站.com/page-c
页面：#listPage、#infoPage、#mapPage

我目前的解决方案是将多页包装在一个容器中：

这或许可以解释为什么我在使用这段代码时遇到问题：

if($('#frontPage').length > 0) { Lib.setTitle('Front Page'); }
if($('#pageB').length > 0) { Lib.setTitle('Page B'); }
if($('#pageC').length > 0) { Lib.setTitle('Page C'); }

每当我导航回我的首页时，似乎第一个语句被触发，然后被最后一个触发的语句覆盖。我知道，因为标题在首次设置为 "Front Page" 并随后被 "Page C" 覆盖时会闪烁。

我可能应该使用像 pageload, pagebeforeload, pagebeforeshow 这样的事件，但它们太多了，而且 "similar" 我不确定该使用哪一个。

"correct" 识别我正在加载的页面以便执行正确功能的方法是什么？
为加载的任何页面执行全局函数的正确代码是什么？

更新
所有自定义 JS 文件都加载到全局/外部页脚中。

Answer 1

您可以使用 pagecontainer 小部件的 beforeshow 事件：http://api.jquerymobile.com/pagecontainer/#event-beforeshow

ui 参数的 toPage 属性 returns 您要导航到的页面的 jQuery object。然后您可以检查其 ID 并显示正确的文本。

$(document).on( "pagecontainerbeforeshow", function( event, ui ) {
    var pageid = ui.toPage.prop("id");

    if(pageid == 'frontPage') { 
        setTitle('Front Page', ui.toPage); 
    } else if (pageid == 'pageB') {
        setTitle('Page B', ui.toPage); 
    } else if(pageid == 'pageC') { 
        setTitle('Page C', ui.toPage); 
    }

});

function setTitle(text, page){
    page.find(".headerText").text(text);
}

DEMO

每次您导航到该页面时都会运行这样您每次都可以显示不同的标题。如果您只显示相同的标题，则可以改用 pagecreate 事件，因为当每个页面最初加载到 DOM:

时，它仅运行s 一次

$(document).on( "pagecreate", function( e ) {    
    var pageid = e.target.id;    

    if (pageid == 'frontPage') { 
        setTitle('Front Page', pageid); 
    } else if (pageid == 'pageB') {
        setTitle('Page B', pageid); 
    } else if(pageid == 'pageC') { 
        setTitle('Page C', pageid); 
    }    
});

function setTitle(text, pageid){
    $("#" + pageid).find(".headerText").text(text);
}

DEMO

我如何知道 jQuery 移动版正在加载哪个页面？

How do I know what page is loading with jQuery Mobile?

jquery

jquery-mobile