How to Implement an onload Event in iframe in JavaScript

1. Execute a JavaScript Function on a Load of an iFrame
2. Implement on load Event in iframe Using Pure JavaScript
3. Implement on load Event in iframe Using onload Event Listner
4. Use Inline Function in HTML’s onload Event Handler of iframe

<iframe> stands for The Inline Frame Element. These are windows to load other web pages on our website and interact with them. The sites or webpages loaded using iframe maintain their session history and cache values and are not dependent on the parent or the calling browser screen. At times we may need to execute a function once the iFrame content has loaded. Let us look at ways in JavaScript to run a method once the iframe content is loaded.

Execute a JavaScript Function on a Load of an iFrame

We can use the onload event handler of the iframe HTML tag. The event fires once all the elements in the iframe is loaded. These include a loading of scripts, images, links, subframes etc. It accepts a function declaration as a parameter that we mention in the HTML tag. The onload="siteLoaded()" will execute the siteLoaded() function, a simple JavaScript function that logs a text to the web browser console. Refer to the following code.

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

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

Output:

iframe content loaded

Implement on load Event in iframe Using Pure JavaScript

Another way to execute a JavaScript function once the loading of an iframe is complete is by using the onload event handler of JavaScript. For this, we query for the intended HTML element and attach the JavaScript function on the onload event handler of the HTML element. It is similar to the way we explained in the previous section. The difference is that we are using a pure JavaScript approach here called the Unobtrusive JavaScript. The HTML is kept lean and clean. Let us look at the following code to understand better.

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

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

Output:

iframe content loaded

Executing this code may cause an error saying that JavaScript cannot add a listener to a null object. For that, we will need to wrap the code inside the window.onload method. Refer to the following code snippet.

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

JavaScript executes the window.onload function once it loads all the elements of the window. The addEventListener() function of JavaScript links a event listener to the HTML object. We first need to select the HTML object in which we intend to add the event listener. The document.querySelector() returns an HTML object, on this object we attach the load event listener with .addEventListener() function. The addEventListener() attaches a function, here an inline function, that is triggered once the iframe element is loaded. We can add a wide range of events to an HTML element using the addEventListener() function. But for the scope of our discussion, we will focus on the load event. Similarly, we can also add the click event to an HTML object.

Implement on load Event in iframe Using onload Event Listner

Like the .addEventListener(), we can also go for the onload event. Here too, we select the iframe element using functions like the document.getElementById() or document.querySelector(). Once the element is selected, we attach a JavaScript function to it. It also can be done in a couple of ways. One way is where we pass the function inline. And another way is to attach the function object without using the (). If we use (), JavaScript will execute the function at the first run instance itself. In JavaScript, we use the onload for its purpose alone, unlike the .addEventListener(), which is more generic. Refer to the following code to understand the usage of the onload function.

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

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

We encapsulate the document.getElementById('my_iframe').onload code section inside the window.onload, just to make sure that JavaScript is able to query the element. The window.onload ensures all the elements are loaded and are available for document.getElementById('my_iframe') to fetch them. Once the element is queried, we attach the function to it using the onload event handler of the HTML object.

Use Inline Function in HTML’s onload Event Handler of iframe

Another way to execute a function on the load event is by attaching an inline method in the HTML. Though this is not the recommended way of implementing a JavaScript function on load events, it comes in handy as a hack at times of dire need. In this approach, we pass the method inline in the HTML in the onload function attribute of the iframe element. JavaScript will execute the function once the iframe is ready. Refer to the following code to understand the usage.

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

Output:

iFrame Loaded

Observe the way we write the function call in the onload event handler. The inline function call is enclosed in (). And there is a () following the inline function call. It is similar to attaching a function declaration in the onclick event for a div.