THL Toolbox > Developers' Zone > THL Integration Plugins > The THL Integration Plugins' Handling of Iframes
Contributor(s): Tom Benner
There are a handful of issues with this setup, including:
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.
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.
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.