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

Nithin Krishnan 2023年1月30日 2022年5月11日
  1. 在載入 iFrame 時執行 JavaScript 函式
  2. 使用純 JavaScript 在 iframe 中實現 load 事件
  3. 使用 onload 事件監聽器在 iframe 中實現 load 事件
  4. iframe 的 HTML onload 事件處理程式中使用行內函數
用 JavaScript 在 iframe 中實現一個 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 事件中附加一個函式宣告。

相關文章 - JavaScript Event