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.src
property of the iFrame tag. If your iFrame navigates between different domains, ports or protocols; then you will need to provide an array of URLs or disable this option.body
to px and then adding the top and bottom figures to the offsetHeight of the body
tag.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.document.body.scrollHeight
*document.documentElement.offsetHeight
document.documentElement.scrollHeight
*data-iframe-height
attributedocument.body.offsetWidth
document.body.scrollWidth
*document.documentElement.offsetWidth
document.documentElement.scrollWidth
*data-iframe-width
attributeparentIFrame.close()
or iframe.iframeResizer.close()
methods. See below for details.parentIFrame.sendMessage()
method.window.iFrameResizer
object before the JavaScript file is loaded into the page.iframe.iFrameResizer.sendMessage()
method (See below for details).window.parentIFrame
object. These method should be contained by a test for the window.parentIFrame
object, in case the page is not loaded inside an iFrame. For example:false
to disable the callback.message
can be any data type that can be serialized into JSON. The targetOrigin
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.autoResize
option to prevent auto resizing and enable the sizeWidth
option if you wish to set the width.size
method with dimensions:iFrameResizer
object is bound to it. This has the following methods available.message
can be any data type that can be serialized into JSON. The targetOrigin
option is used to restrict where the message is sent to, in case your iFrame navigates away to another domain.iframe-resizer
tag.html
or body
elements, but it could be on any element in the page. This can sometimes be got around by using the taggedElement
height calculation method and added a data-iframe-height
attribute to the element that you want to define the bottom position of the page. You may find it useful to use position: relative
on this element to define a bottom margin or allow space for a floating footer.:hover
events, these won’t be detected by default. It is however possible to create mouseover
and mouseout
event listeners on the elements that are resized via CSS and have these events call the parentIFrame.size() method. With jQuery this can be done as followstextarea
input boxes. Unfortunately the WebKit browsers don’t trigger the mutation event when this happens. This can be worked around to some extent with the following code.parentIFrame
object is created once the iFrame has been initially resized. If you wish to use it during page load you will need call it from the readyCallback.src
attribute of the iFrame. If they don’t match an error is thrown. This behaviour can be disabled by setting the checkOrigin option to false.enablePublicMethods
option has been removed. The enableInPageLinks
option has been rename to inPageLinks
.<iframe>
tags for XHTML complience [SlimerDude]. #69 Fix watch task typo in gruntfile.js [Matthew Hupman]. Remove trailing comma in heightCalcMethods array #76 [Fabio Scala].interval
to a negative number now forces the interval test to run instead of MutationObserver.