How to Load Iframe in jQuery onload Event

Websolutionstuff | Jun-21-2024 | Categories : Laravel PHP jQuery

Hello, laravel web developers! In this article, we'll see how to load an iframe in jQuery on a load event. In jQuery, we'll load iframe using the onload event. The load event occurs when a specified element has been loaded.

This event works with elements associated with a URL (image, script, frame, iframe), and the window object.

Depending on the browser, the load event may not trigger if the image is cached (Firefox and IE).

jQuery Iframe on Load Event

JQuery Iframe on Load Event

<!DOCTYPE html>
<html>
<head>
    <title>How to Load Iframe in jQuery onload Event - Websolutionstuff</title>
</head>
<body>
    <iframe id="input_iframe" src="test.pdf"></iframe>
  
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var iframe = $('#input_iframe');
  
            iframe.on('load', function() {
                info('Iframe content has loaded.');
            });
        });
    </script>
</body>
</html>

 

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Load Video in jQuery on Window Load</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="test_video"></div>
  
    <script>
        $(window).on("load", function() {
            $('#test_video').prepend('<iframe src="../file/path" width="680" height="383" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
        });
    </script>
</body>
</html>

 


You might also like:

Recommended Post
Featured Post
How To Create Dynamic Linechart In Laravel
How To Create Dynamic Linechar...

In this post, we will see how to create a dynamic line chart in laravel. A dynamic line chart or line plot or line...

Read More

Jul-22-2020

How To Install Python On Ubuntu
How To Install Python On Ubunt...

In this article, we will see how to install python on ubuntu. Python is a popular programming language. P...

Read More

May-06-2022

Node.js MySQL Create Database
Node.js MySQL Create Database

In this tutorial we will see Node.js MySQL Create Database. For any kind data store or run query then we need database l...

Read More

Sep-22-2021

How To Redirect Another Page Using Javascript
How To Redirect Another Page U...

In this article, we will see how to redirect another page using javascript. we will redirect the page to another pa...

Read More

Nov-04-2022