2008-09-03 39 views
13

我有一個JavaScript函數,當它被調用時操縱DOM(添加CSS類等)。這在用戶更改表單中的某些值時調用。當文檔第一次加載時,我想調用這個函數來準備初始狀態(在這種情況下比從服務器端到正確的初始狀態設置DOM更簡單)。我應該使用window.onload還是腳本塊?

使用window.onload來完成這個功能或者在我需要修改的DOM元素之後有一個腳本塊會更好嗎?無論哪種情況,爲什麼它更好?

例如:

window.onload = function() { updateDOM("myElement"); }; 

或:

前者似乎是做標準的方式,但

function updateDOM(id) { 
    // updates the id element based on form state 
} 

,我應該通過調用它後者似乎也一樣好,或許更好,因爲一旦腳本被擊中,它就會更新元素,並且只要它被放置處理元素,我沒有看到它的問題。

有什麼想法?一個版本是否比另一個版本更好?

回答

4

絕對使用onload。讓你的腳本與你的頁面分開,否則你會發瘋,試圖在以後解決它們。

0

我的是前者,你只能有1個window.onload函數,而內聯腳本塊你有一個n數字。

0

onLoad,因爲當頁面加載時告訴運行哪些代碼要比通過大量html查找可能執行的腳本標記更容易。

1

雖然我同意其他人關於使用window.onload如果可能的乾淨的代碼,我很確定window.onload將再次被調用時,用戶在IE中點擊後退按鈕,但沒有被調用再次在Firefox中。 (除非他們最近改變了它)。

編輯:我可以倒過來。

在某些情況下,當您希望在用戶點擊從其他頁面返回到您的頁面的後退按鈕時評估腳本時,需要使用內聯腳本。

對此答案的任何更正或補充,歡迎...我不是一個JavaScript專家。

1

@The野人

我敢肯定的是,當用戶點擊IE瀏覽器中的後退按鈕在window.onload將被再次調用,但沒有得到在Firefox再次調用。 (除非他們最近改變了它)。

在Firefox中,當DOM完成加載時調用onload,無論您如何導航到頁面。

3

一些JavaScript框架,如mootools,給你訪問一個名爲「domready中」一個特殊的事件:

包含窗口事件「domready中」,當DOM加載將執行。爲了確保在試圖訪問它們的代碼執行時存在DOM元素,它們應該放置在'domready'事件中。

window.addEvent('domready', function() { 
    alert("The DOM is ready."); 
}); 
16

onload事件被認爲是正確的方式做到這一點,但如果你不介意使用一個JavaScript庫,jQuery的$(文件)。就緒(),甚至更好。

$(document).ready(function(){ 
    // manipulate the DOM all you want here 
}); 

的優點是:

  1. 調用$(文件)。就緒()多次要註冊其他代碼運行 - 你只能設置一次的window.onload。
  2. $(文檔).ready()操作在DOM完成後立即發生 - window.onload必須等待圖像等。

我希望我不會成爲誰在每個JavaScript問題上建議jQuery的人,但它確實很棒。

+0

這是你的答案。瞭解這兩點非常有用! – 2009-11-19 21:46:03

2

IE上的window.onload也等待二進制信息加載。它不是「DOM何時加載」的嚴格定義。因此,當頁面被感知加載和腳本被觸發時,可能會有顯着的延遲。因此,我建議尋找一個豐富的JS框架(原型/ jQuery)來處理繁重的工作。

10

我寫了很多Javascript和window.onload是一個可怕的的方式來做到這一點。它是脆弱的,等到每頁資產已加載。因此,如果一張圖片需要永久使用,或者資源在30秒之後纔會超時,那麼您的代碼將無法在用戶看到/操作該頁面之前運行。另外,如果另一塊Javascript決定使用window.onload = function(){},您的代碼將被吹走。

在頁面準備就緒時運行代碼的正確方法是等待您需要更改的元素已準備好/可用。許多JS庫都將其作爲內置功能。

退房: