#Iframe height code#

This code resizes the iFrame's height in response to a postMessage from the child iFrame Add this script to the parent page on which your iFrame is embedded

#Iframe height software#

OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, IN NO EVENT SHALL THEĪUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,įITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR The above copyright notice and this permission notice shall be included in allĬopies or substantial portions of the Software. To use, copy, modify, merge, publish, distribute, sublicense, and/or sellĬopies of the Software, and to permit persons to whom the Software isįurnished to do so, subject to the following conditions: In the Software without restriction, including without limitation the rights Of this software and associated documentation files (the 'Software'), to deal Permission is hereby granted, free of charge, to any person obtaining a copy You are free to use this code for any purpose, under the MIT License.Ĭopy the following code onto the of the parent hosting the iFrame: This works even when the 2 pages are on completely different domains (which is usually a big challenge). It monitors the iFrame for changes in height, and then uses the Window.postMessage() mechanism to instruct the parent page to resize the iFrame. I have prepared some JavaScript code that solves the problem. That post contains some great sample code for making your forms look good. Note: The animation of the Pardot form above is using a form from a post by Alex Avendano at EBQ, on customizing the design of Pardot forms. What we want is for the form’s iFrame to grow vertically so that all the content shows up. This GIF shows an iFrame bar appear after the embedded form’s content gets taller Note what happens when the form is submitted with missing information: several error messages appear and add a distracting scrollbar at the right side. When that happens, an unattractive scrollbar gets added next to the content – and the content no longer looks like it is a natural part of the parent webpage.īelow is an example of a Pardot marketing form that’s been embedded using an iFrame. Also, their height can change unexpectedly.

#Iframe height full#

The problem with iFrames is that you don’t always know their full height. Normally, I would put code like this onto the page so the form appears in an iFrame: The problemĪs a Marketing Operations professional, I often need to put marketing forms onto webpages. The code works for cross-domain iFrames and does not use any libraries like jQuery.

iFrame height will adjust based on the height of the content in them. This page contains freely-usable code for responsive iFrames. Do you need to ensure your iframe’s height is always set to 100% of the height of the content you are embedding? If so, keep on reading.