Update (03/21/2017): This script currently only works if the Frame Name on your iFrame is gsft_main. Thanks to Anil Varanasi for catching this!
</p><p></p><p>Everyone has that one thing that makes them hate their job. And I don't mean <em class="markup--p-em markup--em">I'm just gonna stop going</em> I hate my job. I mean <a class="markup--anchor markup--p-anchor" data-href="https://en.wikipedia.org/wiki/Office_Space" href="https://en.wikipedia.org/wiki/Office_Space"><em class="markup--p-em markup--em">I could set the building on fire</em></a> I hate my job. For me, that thing is iFrames. ServiceNow has given them a lot of love over the years but as the dubbed <em class="markup--p-em markup--em">Portal Guy</em> of my team I would like to see them in an episode of <a class="markup--anchor markup--p-anchor" data-href="http://www.willitblend.com" href="http://www.willitblend.com/"><em class="markup--p-em markup--em">Will It Blend</em></a>.</p><p class="graf--p"></p><p class="graf--p">The iFrame resize issue resurfaces in nearly every version of ServiceNow in an <a title="anchor markup--p-anchor" class="markup--anchor markup--p-anchor" data-href="https://hi.service-now.com/kb_view.do?sysparm_article=KB0546515" href="https://hi.service-now.com/kb_view.do?sysparm_article=KB0546515">on again</a>, <a title="anchor markup--p-anchor" class="markup--anchor markup--p-anchor" data-href="https://hi.service-now.com/kb_view.do?sysparm_article=KB0551949" href="https://hi.service-now.com/kb_view.do?sysparm_article=KB0551949">off again</a> fashion. For those paying attention, those two KB links alone account for Dublin, Eureka, Fuji, and Geneva. Hopefully the unveiling of Service Portal in Helsinki will render all this unnecessary. But for those still fighting the fight, here we go.</p><p class="graf--p"></p><p class="graf--p">In order to understand the solution, it may first help to understand the real problem… the evil iFrame.</p><p class="graf--p"></p><h2 class="graf--h4">HTML Document Flow</h2><p></p><p class="graf--p">In a normal HTML page, blocks like paragraphs have a <a title="anchor markup--p-anchor" class="markup--anchor markup--p-anchor" data-href="https://css-tricks.com/the-css-box-model/" href="https://css-tricks.com/the-css-box-model/">natural flow</a>. That is, each block pushes subsequent blocks down the page. Think of each paragraph like a cardboard box containing its content, they naturally stack. You can also have container boxes, which noramlly have to be big enough to contain any boxes stacked inside. And in HTML, these are magic containers that expand their height to fit their contents, aren't computers grand.</p><p class="graf--p"></p><p class="graf--p">In HTML terms, this is how static positioning works for most blocks, except for iframes. The iframe retireves its content from a separate URL and requires its height to be manually specified. If it isn't big enough to contain your precious Catalog Order form, sorry, that content gets pushed into an area reachable only by an odd secondary scrollbar.</p><p class="graf--p"></p><h2 class="graf--h4">ServiceNow's (Fragile) Solution</h2><p></p><p class="graf--p">ServiceNow gets around this limitation by providing a script that automatically calculates the size of an iframe's contents and changes the size of the iframe. It is a very common trick used to outsmart the iframe by measuring the height of blocks inside the iframe. But as ServiceNow changes its UI, inevitably the script fails to accommodate those changes.</p><p class="graf--p"></p><p class="graf--p">In Geneva, the latest of these changes was making some top level elements absolute positioned, not counting all height contributing nodes in the calculation, and by adding dynamic content (new AJAX based activity stream) that doesn't trigger a calculation update. These are outside the scope of the current discussion, we can revisit those another time.</p><p class="graf--p"></p><h2 class="graf--h4">The Fix</h2><p></p><p class="graf--p">While I initially tried to hack in a direct fix for these issues, I found myself consistently thwarted and eventually settled on a single UI Script using a polling technique to recalculate the appropriate size of the iframe.</p><p class="graf--p"></p><ol class="postList"><li><strong class="markup--li-strong markup--strong">Create a Global UI Script</strong></li></ol><p>(See <a title="ist.github.com/tltoulson/01236ca05273809e7ac3" href="https://gist.github.com/tltoulson/01236ca05273809e7ac3">Gist</a> for latest code)</p><pre __default_attr="javascript" __jive_macro_name="code" class="jive_macro_code _jivemacro_uid_14622409916986510 jive_text_macro" data-renderedposition="1109.59375_8_1174_2208" jivemacro_uid="_14622409916986510"><p>(function() {</p><p> var essUrl = 'ess';</p><p> var pollingDelay = 250;</p><p> var prevHeight;</p><p> var src = '';</p><p></p><p></p><p> /**</p><p> * Executes the proper calculation strategy and returns the internal height of the iframe. You should edit this function if you find strategies that are not accounted for</p><p> * @function getHeight</p><p> */</p><p> var getHeight = function() {</p><p> if (iframePageIs('com.glideapp.servicecatalog_checkout_view_v2.do')) {</p><p> return getTotalHeight([</p><p> 'body &gt; .outputmsg_div',</p><p> 'body &gt; table:nth-of-type(1)',</p><p> '#sc_order_status_intro_text',</p><p> '#sc_cart_view',</p><p> '.catalog_button_container'</p><p> ], 0);</p><p> }</p><p> else if (iframePageIs('com.glideapp.servicecatalog_cat_item_view.do')) {</p><p> // resize catalog forms</p><p> return getTotalHeight([</p><p> 'body &gt; outputmsg_div',</p><p> 'body &gt; table:nth-of-type(1)',</p><p> '#item_table',</p><p> 'body &gt; table:nth-of-type(3)'</p><p> ], 100);</p><p> }</p><p> else if (iframePageIs('catalog_home.do')) {</p><p> return getTotalHeight([</p><p> 'body &gt; outputmsg_div',</p><p> 'body &gt; table:nth-of-type(1)',</p><p> '#homepage_grid'</p><p> ]);</p><p> }</p><p> else if (iframePageIs('$knowledge.do')) {</p><p> // Knowledge v3 UI</p><p> if ($('gsft_main').contentWindow.$j('body')[0].style.overflow != 'hidden') {</p><p> $('gsft_main').contentWindow.$j('body')[0].style.overflow = 'hidden';</p><p> }</p><p></p><p></p><p> // Shrink iframe when the src changes to force a recalculation</p><p> if (src != $('gsft_main').contentWindow.location.href) {</p><p> src = $('gsft_main').contentWindow.location.href;</p><p> return 400;</p><p> }</p><p></p><p></p><p> return getTotalHeight(['.application'], 100);</p><p> }</p><p> else if (iframePageIs('assessment_take2.do')) {</p><p> // Resize Assessments</p><p> return getTotalHeight([</p><p> 'form'</p><p> ], 100);</p><p> }</p><p> else {</p><p> // resize default</p><p> return getTotalHeight([</p><p> 'body &gt; outputmsg_div',</p><p> '.section_header_div_no_scroll',</p><p> '.form_body',</p><p> '.navbar-fixed-bottom',</p><p> '.tabs2_spacer',</p><p> '.tabs2_list'</p><p> ], 100);</p><p> }</p><p> };</p><p></p><p></p><p> /**</p><p> * @function getTotalHeight</p><p> * @param {array} divs - Array of CSS selectors that identify the div's whose height should be added in the calculation</p><p> * @param {int} modifier - Number of additional pixels to add as a modifier</p><p> */</p><p> var getTotalHeight = function(divs, modifier) {</p><p> var h = 0;</p><p></p><p></p><p> $j.each(divs, function(ix, val) {</p><p> h = h + $('gsft_main').contentWindow.$j(val).height();</p><p> });</p><p></p><p></p><p> return h + modifier;</p><p> };</p><p></p><p></p><p> /**</p><p> * Determines if the url contains the given fragment</p><p> * @function iframePageIs</p><p> * @param {string} urlFragment - String to search for in the iframe url</p><p> *</p><p> */</p><p> var iframePageIs = function(urlFragment) {</p><p> return ($('gsft_main').contentWindow.location.href.indexOf(urlFragment) != -1);</p><p> };</p><p></p><p></p><p> /**</p><p> * A recursive polling function that gets the internal height of the iframe and resizes the it accordingly.</p><p> * @function resizeIframeFix</p><p> */</p><p> var resizeIframeFix = function() {</p><p> setTimeout(function() {</p><p> var curHeight;</p><p></p><p></p><p> if ($j &amp;&amp; $('gsft_main') &amp;&amp; $('gsft_main').contentWindow.$j) {</p><p> curHeight = getHeight();</p><p></p><p></p><p> if (prevHeight != curHeight) {</p><p> $j('#gsft_main').height(curHeight);</p><p> prevHeight = getHeight();</p><p> }</p><p> }</p><p></p><p></p><p> resizeIframeFix();</p><p> }, pollingDelay);</p><p> };</p><p></p><p></p><p> // Iniaite polling loop if we are on a top level CMS page</p><p> if (top == window &amp;&amp; window.location.href.indexOf(essUrl) != -1) {</p><p> addAfterPageLoadedEvent(function() {</p><p> // if resizable iframe exists</p><p> if ($('gsft_main')) {</p><p> resizeIframeFix();</p><p> }</p><p> });</p><p> }</p><p>})();</p></pre><p></p><p>That's it. One step. For a more refined approach, you could make the UI Script non-global and manually embed it in your CMS Layout macros or as a dynamic block. But I find this approach works just as well and its only meant to be a workaround anyway, easy to plug in and easy to remove.</p><p></p><p>Via <a title="og.codecreative.io/" href="http://blog.codecreative.io/">Code Creative</a></p>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
