jQuery的移動加載動態頁面

我有一個index.html頁面加載jquery和jquery移動庫（最新版本）與其他兩個頁面的鏈接。jQuery的移動加載動態頁面

<a href="page2.html" class="ui-state-persist" id='some_id' data-role="button" data-theme="e" >Page2</a> 

<a href="page3.html" class="ui-state-persist" id='some_id' data-role="button" data-theme="e" >Page3</a>

是否可以在第2頁和第3頁中包含自定義JavaScript文件？如果我將它們包含爲像這樣page2.html正確呈現，但js文件似乎被忽略。這樣做的目標是在主菜單和應用程序頁面之間加載javascript的等待時間。

page2.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Apptitle> 
    <meta charset="utf-8"/> 

    <!-- custom files and libraries --> 
    <script src="../js/mycode.js"></script> 
    </head> 
    <body> 

<div data-role="page" id="preTktTab"> 
<div data-role="header" data-position="inline"> 
<!-- and so on -->

來源

2011-11-15 Mustapha George

下面是我給某人一個非常類似的問題作出解釋：jQueryMobile page events not firing when navigating to a different html page

基本上當你瀏覽到頁面在jQuery Mobile框架，框架拉頁面通過AJAX進入DOM。當它這樣做時，它只抓取頁面上第一個<div data-role="page">元素內的HTML並忽略頁面的其餘部分。因此，如果您想在這些頁面視圖上加載JavaScript，則需要在<div data-role="page">元素內添加<script>標籤。

例如，更改：

<html> 
<head> 
    <script src="..." type="text/javascript"></script> 
</head> 
<body> 
    <div data-role="page"> 
     ...mobile page here... 
    </div> 
</body> 
</html>

要：

<html> 
<head> 
</head> 
<body> 
    <div data-role="page"> 
     <script src="..." type="text/javascript"></script> 
     ...mobile page here... 
    </div> 
</body> 
</html>

下面是一些關於這個問題好讀（注意「已知限制」在頁面的底部）：http://jquerymobile.com/demos/1.0rc3/docs/pages/page-navmodel.html

來源

2011-11-15 18:40:58 Jasper

您的解決方案適用於Mozilla和Chrome。不幸的是，在我們的手機瀏覽器Blackberry上，它加載了JavaScript文件，但似乎並未執行。 –

你可以使用'eval（）'來評估代碼，如下所示：'eval（$（'＃page_id'）。find（'script'）。html（））;'但是如果你正在破解的代碼只是一個KB左右，我不會擔心分裂JS。 – Jasper

您是否看到過使用「後期加載」javascript構建大型JQM應用的示例或模型？看起來你已經想到了這一點！ –

jQuery的移動加載動態頁面

回答

相關問題