如何知道使用jQuery Mobile加載的頁面？

Question

在我學習JQM時，我發現JQM不像普通瀏覽器那樣加載頁面。它只是提取內容並更新DOM。

當所請求的頁面加載，jQuery Mobile的解析文檔爲 與數據角色=「頁」屬性的元素，並插入該代碼 成原始頁面的DOM。

我在物理頁面和JQM頁面之間混合。頁面使用PHP加載，我的tempalte代碼loosk是這樣的：

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

視圖和PHP頁面一樣。

頭版
網址：mysite.com
頁數：#frontPage

網頁B
網址：mysite.com/page-b
頁數：#listPage，#infoPage， #mapPage

Page C
URL：mysite.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'); } 

每當我回到我的首頁，似乎第一條語句被觸發，然後被最後一條觸發語句覆蓋。我知道，因爲標題首次被設置爲「首頁」時閃爍，然後被「頁面C」覆蓋。

我應該使用像pageload, pagebeforeload, pagebeforeshow這樣的事件，但它們有很多和「相似」，我不確定要使用哪一個。

1. 什麼是「正確」的方式來確定我正在加載哪個頁面，以便我可以執行正確的功能？

2. 執行加載的任何頁面的全局函數的正確代碼是什麼？

更新
所有自定義JS文件在全局/外部頁腳加載。

Answer 1

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

的UI參數的toPage屬性返回你導航到該頁面的jQuery對象。然後，您可以檢查其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：

$(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