THL Toolbox > Developers' Zone > THL Integration Plugins > The THL Integration Plugins' Handling of Iframes
The THL Integration Plugins' Handling of Iframes
Contributor(s): Tom Benner
To display Rails apps, PHP apps, or PHP pages inside of portals other than their native one, we use an iframe to show the app/page inside of the parent portal page. This is done by appending a hash like #iframe=http://www.thlib.org/places/maps/interactive to the end of a THL URL. JavaScript in /global/js/app_plug.js looks for this hash, and if it exists, it replaces the current page content with an iframe containing that page. The iframe's src has parameters like css_url (see the code for all of the params) appened to determine the behavior of the iframe page. The integration plugins, upon seeing these parameters, print out HTML that removes the usual THL template and set up a session to make this templateless version persistent, so that when the user clicks on a link inside the iframe, another templateless page is loaded inside the iframe.
There are a handful of issues with this setup, including:
A Templateless Page Is Opened in a New Browser Tab/Window
If an iframe session is active and the user opens a page of the same domain in a new window, the session will cause the page to be rendered without a template. To combat this, a JS check is performed on each templateless page to see if is not inside an iframe. If it isn't, it's redirected to itself, but with a GET param of "frame=destroy" appended. When the integration plugin sees this, the session is unset, causing a templated page to be rendered.
A Templated Page Is Opened in an Iframe
If the above situation occurs, the session's destruction will cause new pages inside the original iframe to have a template. To combat this, a JS check is performed on all THL pages to see if the following conditions are true about the page:
- is inside an iframe
- doesn't have templateless code defined
- hasn't already been part of one of these redirects
- is either referred from a templateless page or has params that should make it a templateless page
The last condition is the least foolproof one, as it's not clear if these double banners always occurs after referrals, but it's necessary; otherwise, any page with combineJS.php inside of an iframe (including pages in iframe popups) would undergo this redirect. If all conditions are true, the page is redirected to itself, but with a GET param of "frame=create" appended. When the integration plugin sees this, a new templateless session is set up, causing a templateless page to be rendered.
Dynamically Resizing the Height of Iframes When Their Content's Height Changes
Upon the creation of an iframe, the parent window doesn't know how tall the content will be. Similarly, when the content's height changes (e.g. after AJAX calls in the iframe change its content), the containing iframe's height might not properly fit the new content. Since Firefox (and possibly other browsers) don't allow iframe pages to interact with their parent windows when they are on different domains for security reasons, the solution is a bit involved. When the iframe page loads, it appends an invisible child iframe to its body (see /global/js/in_frame.js), loading a PHP script in it that is on www.thlib.org, so that it is on the same domain as the parent window. The main iframe passes its height to this script with a GET param. The script (/global/php/resize_iframe.php) gets this height and calls a JS function in the parent window that resizes the iframe to have this height. There isn't a security issue between the child iframe and the parent window since they are on the same domain.
When AJAX is called in the main iframe, it may change the iframe's height, so this child iframe must also be loaded (to call the iframe resizing function in the parent window) when AJAX responses return successfully. This is done by putting the child iframe-loading function in jQuery(document).ajaxSuccess.
