jQuery Plugin For Auto Resizing iFrame - iFrame Resizer
File Size: | 178 KB |
---|---|
Views Total: | 51145 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
iFrame Resizer is a small and useful jQuery plugin that automatically resize the cross domain iframe to fit it's container on window resizing. Perfect for responsive web designs.
See also:
Basic Usage:
1. Load the latest jQuery library and jQuery iFrame Resizer plugin at the bottom of your web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="application/javascript" src="jquery.iframeResizer.min.js"></script>
2. Insert a iframe element on your web page
<iframe src="frame.content.html" width="100%" scrolling="no"></iframe>
3. Call the plugin with default options.
$('iframe').iFrameSizer({ // Disable if using size method with custom dimensions. autoResize : true, // Override the body background style in the iFrame. bodyBackground : null, // Override the default body margin style in the iFrame. // A string can be any valid value for the CSS margin attribute, // for example '8px 3em'. A number value is converted into px. bodyMargin : null, bodyMarginV1 : 8, bodyPadding : null, // When set to true, only allow incoming messages from the domain // listed in the src property of the iFrame tag. If your iFrame // navigates between different domains, ports or protocols; // then you will need to disable this option. checkOrigin : true, // If enabled, a window.parentIFrame object is created in the iFrame // that contains methods outlined enablePublicMethods : false, // 'bodyOffset' | 'bodyScroll' | 'documentElementOffset' | 'documentElementScroll' | // 'max' | 'min' | 'grow' | 'lowestElement' heightCalculationMethod : 'offset', // The default value is equal to two frame refreshes at 60Hz interval : 32, // Setting the log option to true will make the scripts in both the host page // and the iFrame output everything they do to the JavaScript console // so you can see the communication between the two scripts. log : false, // Set maximum height/width of iFrame. maxHeight : Infinity, maxWidth : Infinity, // Set minimum height/width of iFrame. minHeight : 0, minWidth : 0, // Enable scroll bars in iFrame. scrolling : false, // Resize iFrame to content height. sizeHeight : true, // Resize iFrame to content width. sizeWidth : false, // Set the number of pixels the iFrame content size has to change by, // before triggering resize of the iFrame. tolerance : 0, // Called when iFrame is closed via parentIFrame.close() method. closedCallback : function(){}, // Initial setup callback function. initCallback : function(){}, // Receive message posted from iFrame with the parentIFrame.sendMessage() method. messageCallback : function(){}, // Function called after iFrame resized. resizedCallback : function(){}, // Called before the page is repositioned after a request from the iFrame scrollCallback : function(){return true;} });
Change logs:
v2.8.2 (2015-02-12)
- Throw error if passed a non-DOM object.
This awesome jQuery plugin is developed by davidjbradshaw. For more Advanced Usages, please check the demo page or visit the official website.