THL Toolbox > Developers' Zone > Ruby on Rails Development > Embedding ROR Apps in THL Pages
Embedding ROR Apps in THL Pages
Contributor(s): Than Grove, Tom Benner
Any THL page can display the output from a Ruby on Rails app by using the hash call “#iframe=”. This hash call invokes the application plug-in object written by Jed Verity, in the 
app_plug.js script included within all THL pages. To make the call, simply append “#iframe=” plus the full url to the ROR application page you want to display. For instance, to embed the Literary Genres knowledge map within the genres page of the literary encyclopedia, the full URL is:
This will insert an IFrame in the page and display the Ruby on Rails app within that. This should work for all ROR apps in any page on THL. However, the present way that the thlplug javascript object is constructed, the size of the IFrame one wants needs to be encoded within the JS object based on the URL one is using. This is done in the "dims_load" function of the thlplug object found in the app_plug.js script. The code for that function looks like this.
dims_load: function() {
   this.dim_arr = new Array() ;
   this.dim_arr[env_tmb + '/categories/119/children'] = { y: 1043 , x: 0 } ; 
   this.dim_arr[env_mms + '/media_collection_associations?collection_id=22'] = { y: 577 , x: 0 } ;
},
This says that for the Topical Map Builder (Knowledge Maps App) when you go to the url "http://tmb.thlib.org/categories/119/children" make the Iframe have a width that matches the default width of the container element (x: 0) and have a height of 1043 px (y: 1043). For the Media Management system when it goes to the url 'http://mms.thlib.org/media_collection_associations?collection_id=22', it should have a width defaulting to that of its container element and a height of 577 (y: 577). For each ROR page that is embedded in a THL page using the #iframe code, this variable must be set.
Dynamic resizing of the iframe's height based on its content's height
When the height of the iframe content is unknown, or will be changed dynamically due to AJAX calls, it is necessary to resize the iframe based on the current height of its content. If the iframe's src page is on a different domain than its parent window, it cannot pass information about its height to the parent window due to security restrictions in Firefox. The workaround is to insert a zero-size, invisible iframe inside the main iframe, with its src being on the same domain as the parent window, and pass it the size of the main iframe via a GET value. It will then call a function in the parent window (without any security issues, as it's on the same domain), passing it the height from the GET value, and the parent window's function will resize the iframe accordingly.
In our instance, the invisible iframe's insertion is done with /global/js/in_frame.js, or in Rails, javascripts/service_plug.js, which is included in all main iframes. It sets /global/php/resize_iframe.php as the invisible iframe's src, and this PHP file calls the parent window's set_iframe_height() function, which is defined in /global/app_plug.js.
For content that is resized with AJAX, the content height can constantly be changing, so the iframe resizing script needs to be called after the completion of each AJAX call. This can be done with jQuery(document).ajaxSuccess, and it is currently implemented in the PD, in service_plug.js.