How to make automatically expanding iframes

It is possible to use JavaScript to automatically expand the height of the iframe based on the amount of contained contained in the iframe.

To do this, follow these steps:

1. Add an ID to your iframe HTML.

It can be anything, but in our code we use "publicpage." If you use something different just make sure you change the reference in our JS code.

2. Add this JS to your header or footer message that is used on your ReservationKey page.

<br /> <script type="text/javascript"> if (!String.prototype.startsWith) { Object.defineProperty(String.prototype, 'startsWith', {value: function(search, rawPos) {var pos = rawPos > 0 ? rawPos|0 : 0;return this.substring(pos, pos + search.length) === search;}});} var lastHeight = 0;var iframePrefix = "/45365"; function processHeight(e) {var height = document.getElementById('theform').scrollHeight;if (parent && height !== lastHeight) { lastHeight = height;var message = JSON.stringify( {height:height} );parent.postMessage(message, '*' );}setTimeout(processHeight, 500);} if ( window.addEventListener ) {window.addEventListener('load', processHeight, false);} else if ( window.attachEvent ) {window.attachEvent('onload', processHeight);} function inIframe () {try {return window.self !== window.top;} catch (e) {return true;}} function shouldBeInIframe() {return window.location.pathname.startsWith(iframePrefix);} </script><br />

3. Add this code to your website.

Somewhere on the page that contains your iframe, on your website, this JavaScript code needs to be added. NOTE: we have not been able to get this to work with a Wix website since they contain iframes within an iframe.

<br /> <script> if (!String.prototype.endsWith) { String.prototype.endsWith = function(search, this_len) { if (this_len === undefined || this_len > this.length) { this_len = this.length;}return this.substring(this_len - search.length, this_len) === search;};} function setIframeHeightCO(id, ht) { var ifrm = document.getElementById(id); ifrm.style.visibility = 'hidden'; if (ht < 500) {ht = 500;} ifrm.style.height = (ht + 50) + 'px'; ifrm.style.visibility = 'visible';} function handleDocHeightMsg(e) {var data = JSON.parse( e.data ); if ( data['height'] ) {setIframeHeightCO( 'publicpage', data['height'] );}} if ( window.addEventListener ) {window.addEventListener('message', handleDocHeightMsg, false); } else if ( window.attachEvent ) {window.attachEvent('onmessage', handleDocHeightMsg);} </script><br />

Now, your iframe should automatically resize as the height of the contained content changes. Such as when a room is selected and the reservation form appears, the the iframe is likely to get taller.