2010-12-22 75 views
5

我想從我的.js文件中打開.html文件。所以我使用$ .mobile.changePage(「file.html」)。在file.html中有file.js.但是file.html在調用file.html時不會調用。

THanks提前。

first.js

$.mobile.changePage ("file.html"); 

file.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery Mobile Framework - Dialog Example</title> 
<link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" /> 
<script src="jquery-1.4.4.min.js"></script> 
    <script src="jquery.mobile-1.0a2.min.js"></script> 
    <script src="../Scripts/file.js"/> // Could not imported 
    <script src="../Scripts/helperArrays.js"/> // Could not imported 
    <script src="../Scripts/globalVariables.js"/> // Could not imported 
</head> 
<body> 

<div data-role="page"> 

    <div data-role="header" data-nobackbtn="true"> 
    <h1>Vaults</h1> 
    </div> 

<!-- <div data-role="content" data-theme="c" id="contentVault"> 

    <a href="Views/searchPage.html" data-role="button" data-theme="b">Sample Vault</a>  
    <a href="Views/searchPage.html" data-role="button" data-theme="c">My Vault</a>  
    </div> --> 

     <div data-role="content" id="content"> 
     <ul id="listview" data-role="listview" data-inset="true" data-theme="e" data-dividertheme="b">    
      <li id="listdiv" data-role="list-divider">List of Items</li> 
     </ul>  
     </div><!-- /content --> 

</div> 


</body> 
</html> 

請幫助我..

回答

4

jQuery Mobile的通過AJAX變得頁面,並增加了他們的內容到當前頁面。 我看到一些關於將頁面標題更改爲傳入頁面的通知,因此他們(計劃)訪問頭部,但目前jquery mobile在加載頁面時似乎不會加載外部js。

更重要的是 - 如果你使用$(文件)。就緒(),它不會被觸發,因爲它是AJAX

+0

嗨..我怎樣才能調用外部JS? – Finder 2011-01-06 05:09:48

+2

你應該用jquerymobile時尚來寫你的JS--作爲頁面的增強。將它與`

7

當JQM載入你的專區內通過AJAX另一頁是隻吸入任何東西[數據 - 角色=「頁面」],別無其他,像頭


所以,你可以的,如果你想,包括這個div內的任何JS/CSS,問題是,如果這個頁面被訪問多次任何CSS都會積累,但JS的問題更加嚴重。

基本上每個頁面都會附加到DOM,所以如果您使用全局選擇器(如$('div.someClass')),則JS會在整個DOM上運行(每個頁面加載),即使使用ID isn這不是一個完美的解決方案,因爲如果你能連接兩次相同的頁面。


小網站

我已經將所有的CSS成一個文件和JS代碼解決了這個,我想每個頁面加載時運行,我綁定到pageinit和pageshow JQM事件:

<script type="text/javascript">   
$("div:jqmData(role='page'):last").bind('pageinit', function(){ 
      //your code here - $.mobile.activePage not declared 
    }); 

    $("div:jqmData(role='page'):last").bind('pageshow', function(){ 
      //your code here - $.mobile.activePage works now 
    }); 
</script> 

當頁面加載的pageinit事件運行,永遠只能一次(它的加載後,它停留在內存中,如果您導航回到它,甚至通過後退按鈕,這是不會再次發射),另一方面,頁面顯示每次顯示頁面時都會觸發,ev例如,當您通過瀏覽器上的後退按鈕導航回到它時。

pageinit在DOM存在的情況下運行,pageshow事件僅在您有一些代碼依賴於正在呈現的DOM而您需要通過$ .mobile.activePage或某些數據更改時快速參考活動頁面每次顯示時都需要刷新。對於大多數目的,我只使用pageinit作爲jQM的document.ready,並在那裏綁定我的事件。對靜態元素使用bind,而不是對動態元素進行實時處理,因爲實況事件在文檔根處偵聽,您想要在頁面div處偵聽。



對於大型網站

對於大型網站有一個現場活動結合到任何網頁和處理類型的頁面的優勢,這樣的js代碼並不多裝一旦。

如果你有外援的助手功能,你只需要把它放在所有頁面的頭部(如果沒有太多),如果你有一個非常大的網站,你可能會做得更好通過跟蹤哪些JS文件已經加載服務器端。

這一切都可以通過只是沒有使用AJAX來加載新的頁面是可以避免的,所以想想轉換/加載效果是否值得


* 下面是如何處理大JQM網站:*

  1. 綁定現場活動的所有頁/對話框pageinit和pageshow事件:

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

  1. 我引用的每個頁面有一個名字:<div data-role="page" data-mypage="employeelist">
  2. 在你基本上可以爲每個頁面「名」 switch語句這個現場活動,然後檢查event.type爲pageinit/pageshow或兩者並將代碼放在那裏,然後每次創建/顯示頁面時,此事件將被觸發,它知道觸發了哪個頁面,然後調用相應的代碼。最終我的代碼太多了,所以我建立了一個處理程序obj ECT每個頁面的JS被包含在一個單獨的js文件,可以與現場註冊事件處理程序

的缺點是,所有的JS對你的整個網站加載的用戶達到第一頁上,但精縮即使是一個大的網站也比jQuery或jQM小,所以這不應該成爲一個問題。優點是每次用戶導航到新頁面時,您不再通過AJAX爲每個頁面加載所有JS。

*注意:現在RequireJS可以使這個更易於管理