如何在頁面加載時調用JavaScript函數？

145

傳統上，調用JavaScript函數，一旦在頁面加載，你的onload屬性添加到包含一些JavaScript體（通常只有調用函數）：如何在頁面加載時調用JavaScript函數？

<body onload="foo()">

當頁面加載，我想運行一些JavaScript代碼來動態地使用來自服務器的數據填充頁面的各個部分。我無法使用onload屬性，因爲我使用的是JSP片段，它沒有我可以添加屬性的body元素。

有沒有其他方法可以在加載時調用JavaScript函數？我寧願不使用jQuery，因爲我不太熟悉它。

來源

2010-10-01 palAlaa

+11

BTW：它的JavaScript; Java是一種語言，Javascript是另一種語言。沒有Java腳本這樣的事情。 FYI – 2010-10-01 20:00:55

您可以驗證凱文對您的問題的編輯是否仍然提出相同的問題，或者爲了確保我們理解而重新編寫它？（你是否想找到onload的替代方案？） – STW 2010-10-01 20:06:05

256

如果你想利用參數的onload方法，你可以做同樣的事情到這一點：

window.onload = function() { 
    yourFunction(param1, param2); 
};

這將onload綁定到一個匿名函數，當被調用時，它將使用您提供的任何參數運行您所需的函數。當然，您可以在匿名函數中運行多個函數。

來源

2010-10-01 20:38:46

現在，當我動態地包含服務器生成的頁面並需要DOM準備就緒時，我需要完成這個雷區。如果只有某人早些時候鼓勵適當的圖書館用戶。 – 2010-10-01 21:27:38

我沒有說這是個好主意。儘管我工作的主要開發人員有一個強大的案例，但是我還沒有能夠說服他在幾頁之外使用jquery。 – 2010-10-01 21:46:06

那麼也許你應該換工作。如果這項工作的正確工具不是你正在使用的工具，那麼爲什麼你的頭靠在牆上不斷地與無能的對抗呢？ – 2010-10-01 22:09:53

function yourfunction() { /* do stuff on page load */ } 

window.onload = yourfunction;

或者使用jQuery，如果你想：

$(function(){ 
    yourfunction(); 
});

如果你想打電話頁面加載多個函數，看看本文的詳細信息：

Using Multiple JavaScript Onload Functions

來源

2010-10-01 19:59:05 Sarfraz

這是不正確的，該函數將執行並分配它返回的任何內容。（）不應該在那裏。 – epascarello 2010-10-01 20:02:35

如果還有其他函數正在監聽onload事件，則會將它們吹走。最好添加一個事件監聽器，而不是直接分配一個事件處理器。即使在這種情況下，您也可以將它指定爲'window.onload = yourfunction'，而不是函數關閉，而不是您擁有它的方式。你的方式尋求在分配時執行你的function（）。 – Robusto 2010-10-01 20:03:05

，它將函數的返回值分配給window.onload，除非返回值是一個函數，否則這將不起作用。 – 2010-10-01 20:03:12

你原來的曲estion不清楚，假設凱文的編輯/解釋是正確的，那麼這第一個選項不適

使用onload事件中的典型的選項：

<body onload="javascript:SomeFunction()"> 
....

您也可以將您的JavaScript在最後的身體;在文檔完成之前它不會開始執行。

<body> 
    ... 
    <script type="text/javascript"> 
    SomeFunction(); 
    </script> 
</body>

而且，另一種選擇，就是考慮使用一個JS框架，它本質上做到這一點：

// jQuery 
$(document).ready(function() { 
    SomeFunction(); 
});

來源

2010-10-01 19:59:14 STW

'onload'中的'javascript：'是不必要的，雖然沒有害處。 – icktoofay 2013-06-23 00:06:16

@STW''給出'未捕獲的ReferenceError：未定義LoadResult' – Gunasegar 2015-11-04 06:15:40

$（document）.ready（function（）{SomeFunction（）;}）; – 2017-01-05 21:36:36

另一種方式做，這是通過使用事件偵聽器，在這裏你如何使用它們：

document.addEventListener("DOMContentLoaded", function() { 
    you_function(...); 
});

說明：

DOMContentLoaded這意味着當文檔的DOM對象是滿載和通過JavaScript看，這也可能是「點擊」，「聚焦」...

function（）匿名函數，將在事件時被調用發生。

來源

2012-04-28 21:35:44

請注意，這不適用於IE 8及更低版本。否則，這是最好的純JS解決方案！ – Philipp 2015-05-20 10:57:21

您必須調用您想要在加載時調用的函數（即，，文件/頁面的加載）。例如，文檔或頁面加載時要加載的函數稱爲「yourFunction」。這可以通過在文檔的加載事件中調用函數來完成。有關更多詳細信息，請參閱下面的代碼。

嘗試下面的代碼：

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    $(document).ready(function() { 
     yourFunction(); 
    }); 
function yourFunction(){ 
//some code 
} 
</script>

來源

2014-02-26 13:59:03

here's the trick (works everywhere):

r(function(){ 
alert('DOM Ready!'); 
}); 
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

來源

2015-05-20 11:32:49 Abhishek

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Test</title> 
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
     <script type="text/javascript"> 
 
     function codeAddress() { 
 
      alert('ok'); 
 
     } 
 
     window.onload = codeAddress; 
 
     </script> 
 
    </head> 
 
    <body> 
 
    
 
    </body> 
 
</html>

來源

2017-04-03 08:49:09 anonymous

描述你回答這只是一個代碼 – IsuruAb 2017-04-03 16:01:09

如何在頁面加載時調用JavaScript函數？

回答

相關問題