Easy iFrame Loader Plugin For jQuery - iFrame.js

File Size: 29.5 KB
Views Total: 1781
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy iFrame Loader Plugin For jQuery - iFrame.js

iFrame.js is an easy jQuery ifame loader plugin that enables you to handle and manage iframe based html contents on the webpage.

More features:

  • Notifies your event handler when iframe has finished loading.
  • Your event handler receives loading duration (as well as iframe).
  • Optionally calls your timeout handler.

How to use it:

1. Load the main JavaScript file jquery.iframe.js in your html page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.iframe.js"></script>

2. The plugin provides you a callback so you know when the frame has been loaded, tells you how long it took to load, and provides timeout support.

$("iframe").src(url, optionalCallback, options); 

3. Squirt your own content into your iframes. Due to cross-domain restrictions, "squirt" can only be used with an iframe whose source is either null or pointing to the same domain as the parent document.

$("iframe").squirt("a <em>little</em> content");

4. Possible plugin options:

  • timeout: will be called some time (according to timeoutDuration) after the iframe started loading, if the iframe hasn't yet finished loading. Use "this" to access iFrame. (Note: If you want to abort loading on timeout, you should do it manually in this function, e.g. "this.src=null".)
  • timeoutDuration: Timeout duration, used in conjunction with options.timeout. (Defaults to 60000, i.e. one minute.)
$("iframe").src("https://google.com", function(iframe, duration) { 
  alert("That took " + duration + " millis.");
}, {
  timeout: function() { alert("oops! timed out."); },
  timeoutDuration: 10000
});

This awesome jQuery plugin is developed by mahemoff. For more Advanced Usages, please check the demo page or visit the official website.