Implementar un evento onload en iframe en JavaScript

1. Ejecutar una función de JavaScript en una carga de un iFrame
2. Implementar el evento load en iframe usando JavaScript puro
3. Implementar el evento load en el iframe usando el listener de eventos onload
4. Utilice la función en línea en el controlador de eventos onload de HTML de iframe

<iframe> significa The Inline Frame Element. Estas son ventanas para cargar otras páginas web en nuestro sitio web e interactuar con ellas. Los sitios o páginas web cargados usando iframe mantienen su historial de sesiones y valores de caché y no dependen del padre o de la pantalla del navegador que realiza la llamada. En ocasiones, es posible que necesitemos ejecutar una función una vez que se haya cargado el contenido de iFrame. Veamos formas en JavaScript para ejecutar un método una vez que se carga el contenido del iframe.

Ejecutar una función de JavaScript en una carga de un iFrame

Podemos usar el controlador de eventos onload de la etiqueta HTML iframe. El evento se activa una vez que se cargan todos los elementos del iframe. Estos incluyen una carga de scripts, imágenes, enlaces, subframes, etc. Acepta una declaración de función como parámetro que mencionamos en la etiqueta HTML. El onload="siteLoaded()" ejecutará la función siteLoaded(), una función simple de JavaScript que registra un texto en la consola del navegador web. Consulte el siguiente código.

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

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

Producción :

iframe content loaded

Implementar el evento load en iframe usando JavaScript puro

Otra forma de ejecutar una función de JavaScript una vez que se completa la carga de un iframe es utilizando el controlador de eventos onload de JavaScript. Para ello, consultamos el elemento HTML deseado y adjuntamos la función JavaScript en el controlador de eventos onload del elemento HTML. Es similar a la forma que explicamos en la sección anterior. La diferencia es que estamos usando un enfoque de JavaScript puro aquí llamado JavaScript discreto. El HTML se mantiene sencillo y limpio. Echemos un vistazo al siguiente código para entenderlo mejor.

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

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

Producción :

iframe content loaded

La ejecución de este código puede provocar un error que indique que JavaScript no puede agregar un oyente a un objeto nulo. Para eso, necesitaremos envolver el código dentro del método window.onload. Consulte el siguiente fragmento de código.

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

JavaScript ejecuta la función window.onload una vez que carga todos los elementos de la window. La función addEventListener() de JavaScript vincula un detector de eventos al objeto HTML. Primero debemos seleccionar el objeto HTML en el que pretendemos agregar el detector de eventos. El document.querySelector() devuelve un objeto HTML, en este objeto adjuntamos el detector de eventos de carga con la función addEventListener(). El addEventListener() adjunta una función, aquí una función en línea, que se activa una vez que se carga el elemento iframe. Podemos agregar una amplia gama de eventos a un elemento HTML usando la función addEventListener(). Pero para el alcance de nuestra discusión, nos centraremos en el evento load. Del mismo modo, también podemos agregar el evento click a un objeto HTML.

Implementar el evento load en el iframe usando el listener de eventos onload

Al igual que el .addEventListener(), también podemos elegir el evento onload. Aquí también, seleccionamos el elemento iframe usando funciones como document.getElementById() o document.querySelector(). Una vez que se selecciona el elemento, le adjuntamos una función de JavaScript. También se puede hacer de varias formas. Una forma es donde pasamos la función en línea. Y otra forma es adjuntar el objeto de función sin usar el (). Si usamos (), JavaScript ejecutará la función en la primera instancia de ejecución. En JavaScript, usamos onload solo para su propósito, a diferencia de .addEventListener(), que es más genérico. Consulte el siguiente código para comprender el uso de la función 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');
  };
}

Encapsulamos la sección de código document.getElementById('my_iframe').onload dentro de window.onload, solo para asegurarnos de que JavaScript es capaz de consultar el elemento. El window.onload asegura que todos los elementos están cargados y están disponibles para que document.getElementById('my_iframe') los recupere. Una vez que se consulta el elemento, le adjuntamos la función utilizando el controlador de eventos onload del objeto HTML.

Utilice la función en línea en el controlador de eventos onload de HTML de iframe

Otra forma de ejecutar una función en el evento de carga es adjuntando un método en línea en el HTML. Aunque esta no es la forma recomendada de implementar una función de JavaScript en eventos de carga, es útil como truco en momentos de extrema necesidad. En este enfoque, pasamos el método en línea en el HTML en el atributo de función onload del elemento iframe. JavaScript ejecutará la función una vez que el iframe esté listo. Consulte el siguiente código para comprender el uso.

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

Producción :

iFrame Loaded

Observe la forma en que escribimos la llamada a la función en el controlador de eventos onload. La llamada a la función en línea se incluye entre (). Y hay un () después de la llamada a la función en línea. Es similar a adjuntar una declaración de función en el evento onclick para un div.