用 JavaScript 在 iframe 中實現一個 onload 事件

1. 在載入 iFrame 時執行 JavaScript 函式
2. 使用純 JavaScript 在 iframe 中實現 load 事件
3. 使用 onload 事件監聽器在 iframe 中實現 load 事件
4. 在 iframe 的 HTML onload 事件處理程式中使用行內函數

<iframe> 代表內聯框架元素。這些是在我們的網站上載入其他網頁並與之互動的視窗。使用 iframe 載入的站點或網頁會維護其會話歷史記錄和快取值，並且不依賴於父瀏覽器螢幕或呼叫瀏覽器螢幕。有時我們可能需要在 iFrame 內容載入後執行一個函式。讓我們看看在載入 iframe 內容後在 JavaScript 中執行方法的方法。

在載入 iFrame 時執行 JavaScript 函式

我們可以使用 iframe HTML 標籤的 onload 事件處理程式。一旦載入了 iframe 中的所有元素，就會觸發該事件。這些包括指令碼、影象、連結、子框架等的載入。它接受一個函式宣告作為我們在 HTML 標籤中提到的引數。onload="siteLoaded()" 將執行 siteLoaded() 函式，這是一個簡單的 JavaScript 函式，用於將文字記錄到 Web 瀏覽器控制檯。參考以下程式碼。

<iframe src="https://www.youtube.com/" onload="siteLoaded()"></iframe>

function siteLoaded() {
  console.log('iframe content loaded');
}

輸出：

iframe content loaded

使用純 JavaScript 在 iframe 中實現 load 事件

另一種在 iframe 載入完成後執行 JavaScript 函式的方法是使用 JavaScript 的 onload 事件處理程式。為此，我們查詢預期的 HTML 元素並將 JavaScript 函式附加到 HTML 元素的 onload 事件處理程式上。它類似於我們在上一節中解釋的方式。不同之處在於我們在這裡使用了一種稱為 Unobtrusive JavaScript 的純 JavaScript 方法。HTML 保持簡潔和乾淨。讓我們看看下面的程式碼來更好地理解。

<iframe src="https://www.youtube.com/"></iframe>

document.querySelector('iframe').addEventListener('load', function() {
  console.log('iframe content loaded');
});

輸出：

iframe content loaded

執行此程式碼可能會導致錯誤，指出 JavaScript 無法向空物件新增偵聽器。為此，我們需要將程式碼包裝在 window.onload 方法中。請參閱以下程式碼片段。

window.onload = function() {
  document.querySelector('iframe').addEventListener('load', function() {
    console.log('iframe content loaded');
  });
}

JavaScript 一旦載入了 window 的所有元素，就會執行 window.onload 函式。JavaScript 的 addEventListener() 函式將事件偵聽器連結到 HTML 物件。我們首先需要選擇我們打算在其中新增事件偵聽器的 HTML 物件。document.querySelector() 返回一個 HTML 物件，在這個物件上，我們使用 .addEventListener() 函式附加載入事件偵聽器。addEventListener() 附加一個函式，這裡是一個行內函數，一旦載入 iframe 元素就會觸發。我們可以使用 addEventListener() 函式向 HTML 元素新增各種事件。但就我們討論的範圍而言，我們將重點關注 load 事件。同樣，我們也可以將 click 事件新增到 HTML 物件中。

使用 onload 事件監聽器在 iframe 中實現 load 事件

像 .addEventListener() 一樣，我們也可以使用 onload 事件。在這裡，我們也使用 document.getElementById() 或 document.querySelector() 等函式選擇 iframe 元素。選擇元素後，我們將為其附加一個 JavaScript 函式。它也可以通過幾種方式完成。一種方法是我們內聯傳遞函式。另一種方法是在不使用 () 的情況下附加函式物件。如果我們使用 ()，JavaScript 將在第一個執行例項本身執行該函式。在 JavaScript 中，我們單獨使用 onload，這與更通用的 .addEventListener() 不同。參考下面的程式碼來了解 onload 函式的用法。

<iframe id="my_iframe" src="https://www.youtube.com/"></iframe>

window.onload = function() {
  document.getElementById('my_iframe').onload = function() {
    console.log('iframe content loaded');
  };
}

我們將 document.getElementById('my_iframe').onload 程式碼部分封裝在 window.onload 中，只是為了確保 JavaScript 能夠查詢元素。window.onload 確保所有元素都已載入並可供 document.getElementById('my_iframe') 獲取它們。查詢元素後，我們使用 HTML 物件的 onload 事件處理程式將函式附加到它。

在 iframe 的 HTML onload 事件處理程式中使用行內函數

在載入事件上執行函式的另一種方法是在 HTML 中附加一個內聯方法。雖然這不是在載入事件上實現 JavaScript 函式的推薦方式，但它在迫切需要時作為一種 hack 派上用場。在這種方法中，我們在 iframe 元素的 onload 函式屬性的 HTML 中內聯傳遞方法。一旦 iframe 準備就緒，JavaScript 將執行該函式。參考以下程式碼瞭解用法。

<iframe src="https://www.youtube.com/" onload="(function(){ console.log('iFrame Loaded'); })();"></iframe>

輸出：

iFrame Loaded

觀察我們在 onload 事件處理程式中編寫函式呼叫的方式。行內函數呼叫包含在 () 中。在行內函數呼叫之後有一個 ()。它類似於在 div 的 onclick 事件中附加一個函式宣告。