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
<!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
Google Autocomplete Address In...
In this article, we will see the google autocomplete address in laravel 9. In laravel 8 google autocomplete address...
Apr-12-2022
Laravel 9 Toastr Notifications...
In this tutorial, I will show you laravel 9 toastr notifications example. Using toastr.js you can display a success...
Feb-23-2022
Laravel 9 Create Middleware Fo...
In this article, we will see laravel 9 create middleware for XSS protection. Cross-site scripting is a type of...
Apr-30-2022
How to Deploy Laravel on Herok...
In this article, we will see how to deploy laravel on heroku with database. Heroku is a cloud platform as...
Feb-12-2021