網站製作學習誌

我常會在頁面載入完成時，利用 window.load 來執行一些動作。基本的方式如下：

window.onload = function ()
{
  // Do something...
}

特別注意一點：如果直接把新動作附在 window.onload 的話，是會把前一個 window.onload 的動作給蓋掉的。

不過如果現在有兩個動作都需要用到 window.onload ，而且其中一個我不想改動時該怎麼辦呢？ (例如是第三方函式庫裡的程式)

這時可以改用以下的方式：

var oldOnload = window.onload || function () {};
window.onload = function ()
{
  oldOnload();
  // Do Something...
}

換句話說，就是先把舊的 window.onload 放在一個變數裡，然後在新的 window.onload 裡呼叫它。

很重要的一點是，一定要加上「 || function () {} 」！這樣做的目的，是怕如果在此之前沒有指定 window.onload (也就是 undefined) 時，瀏覽器會出現 JavaScript 錯誤。

依照同樣的方式，我們可以讓多個 window.onload 動作：

var beforeAction1 = window.onload || function () {};
window.onload = function () // Functin A
{
  beforeAction1();
  alert('Action 1');
}

var afterAction2 = window.onload || function () {};
window.onload = function () // Functin B
{
  alert('Action 2');
  afterAction2();
}

注意 after 及 before 的命名方式，如果我希望舊的 window.onload 在我目前的動作之前執行，用 before 會比較好；反之就可以用 after 。