JS Tutorial
- Overview
- Documents
iFrame Resizer enables the automatic resizing of the height and width of both same and cross domain iFrames to fit the contained content.
It uses postMessage to pass messages between the host page and the iFrame and when available MutationObserver to detect DOM changes, with a fallback to setInterval for IE8-10.
The code also detects browser events that can cause the content to resize; provides functions to allow the iFrame to set a custom size and close itself. Plus it supports having multiple iFrames on the host-page and additionally provides for the sending of simple messages from the iFrame to the parent page.
Source: davidjbradshaw.github.io
1. INCLUDE JS FILES
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="../js/iframeResizer.min.js"></script>
2. HTML
<div> <iframe src="frame.content.html" width="100%" scrolling="no"></iframe> </div>
3. JAVASCRIPT
iFrameResize();
4. OPTIONS
default: false type: boolean
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.
default: true type: boolean
When enabled changes to the Window size or the DOM will cause the iFrame to resize to the new content size. Disable if using size method with custom dimensions.
default: null type: string
Override the body background style in the iFrame.
default: null type: string || number
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.
default: true type: boolean
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.
default: false type: boolean
If enabled, a window.parentIFrame object is created in the iFrame that contains methods outlined below.
default: 32 (in ms) type: number
In browsers that don't support mutationObserver, such as IE10, the library falls back to using setInterval, to check for changes to the page size. The default value is equal to two frame refreshes at 60Hz, setting this to a higher value will make screen redraws noticeable to the user.
Setting this property to a negative number will force the interval check to run instead of mutationObserver.
Set to zero to disable.
default: 'bodyOffset'
values: 'bodyOffset' | 'bodyScroll' | 'documentElementOffset' | 'documentElementScroll' |
'max' | 'min' | 'grow' | 'lowestElement'
By default the height of the iFrame is calculated by converting the margin of the body to px and then adding the top and bottom figures to the offsetHeight of the body tag.
In cases where CSS styles causes the content to flow outside the body you may need to change this setting to one of the following options. Each can give different values depending on how CSS is used in the page and each has varying side-effects. You will need to experiment to see which is best for any particular circumstance.
-
bodyScroll uses document.body.scrollHeight
-
documentElementOffset uses document.documentElement.offsetHeight
-
documentElementScroll uses document.documentElement.scrollHeight
-
max takes the largest value of the main four options
-
min takes the smallest value of the main four options
-
grow same as max but disables the double resize that is used to workout if the iFrame needs to shrink. This provides much better performance if your iFrame will only ever increase in size
-
lowestElement Loops though every element in the the DOM and finds the lowest bottom point.
Notes:
The bodyScroll, documentElementScroll, max and min options can cause screen flicker and will prevent the interval trigger downsizing the iFrame when the content shrinks. This is mainly an issue in IE 10 and below, where the mutationObserver event is not supported. To overcome this you need to manually trigger a page resize by calling the parentIFrame.size() method when you remove content from the page.
The lowestElement option is the most reliable way of determining the page height. However, it does have a performance impact in older versions of IE. In one screen refresh (16ms) Chrome 34 can calculate the position of around 10,000 html nodes, whereas IE 8 can calculate approximately 50. It is recommend to fallback to max or grow in IE10 and below.
default: infinity type: integer
Set maximum height/width of iFrame.
default: 0 type: integer
Set minimum height/width of iFrame.
default: false type: integer
Enable scroll bars in iFrame.
default: true type: boolean
Resize iFrame to content height.
default: false type: boolean
Resize iFrame to content width.
5. CALLBACK METHODS
closedCallback
type: function (iframeID)
Called when iFrame is closed via parentIFrame.close() method.
type: function (iframe)
Initial setup callback function.
type: function ({iframe,message})
Receive message posted from iFrame with the parentIFrame.sendMessage() method.
type: function ({iframe,height,width,type})
Function called after iFrame resized. Passes in messageData object containing the iFrame, height,width and the type of event that triggered the iFrame to resize.
6. IFRAME METHODS
To enable these methods you must set enablePublicMethods to true. This creates thewindow.parentIFrame object in the iFrame. These method should be contained by a test for thewindow.parentIFrame object, in case the page is not loaded inside an iFrame. For example:
if ('parentIFrame' in window) {
parentIFrame.close();
}
Remove the iFrame from the parent page.
Returns the ID of the iFrame that the page is contained in.
sendMessage(message,[targetOrigin])
Send string to the containing page. The message is delivered to the messageCallback function. ThetargetOrigin option is used to restrict where the message is sent to; to stop an attacker mimicking your parent page. See the MDN documentation on postMessage for more details.
setHeightCalculationMethod(heightCalculationMethod)
Change the method use to workout the height of the iFrame.
size ([customHeight],[ customWidth])
Manually force iFrame to resize. This method optionally accepts two arguments: customHeight &customWidth. To use them you need first to disable the autoResize option to prevent auto resizing and enable the sizeWidth option if you wish to set the width.
iFrameResize({
autoResize: false,
enablePublicMethods: true,
sizeWidth: true
});
Then you can call the size method with dimensions:
if ('parentIFrame' in window) {
parentIFrame.size(100); // Set height to 100px
}
