How to Fix CMS iFrame Resizing in ServiceNow

tltoulson · ‎05-02-2016

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!

Everyone has that one thing that makes them hate their job. And I don't mean I'm just gonna stop going 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">I could set the building on fire</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 Portal Guy 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/">Will It Blend</a>.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.In order to understand the solution, it may first help to understand the real problem… the evil iFrame.<h2 class="graf--h4">HTML Document Flow</h2>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.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.<h2 class="graf--h4">ServiceNow's (Fragile) Solution</h2>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.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.<h2 class="graf--h4">The Fix</h2>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.<ol class="postList"><li>Create a Global UI Script</li></ol>(See <a title="ist.github.com/tltoulson/01236ca05273809e7ac3" href="https://gist.github.com/tltoulson/01236ca05273809e7ac3">Gist</a> for latest code)<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">(function() {   var essUrl = 'ess';   var pollingDelay = 250;   var prevHeight;   var src = '';   /**     * 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     * @function getHeight     */   var getHeight = function() {       if (iframePageIs('com.glideapp.servicecatalog_checkout_view_v2.do')) {           return getTotalHeight([               'body &gt; .outputmsg_div',               'body &gt; table:nth-of-type(1)',               '#sc_order_status_intro_text',               '#sc_cart_view',               '.catalog_button_container'           ], 0);       }       else if (iframePageIs('com.glideapp.servicecatalog_cat_item_view.do')) {           // resize catalog forms           return getTotalHeight([               'body &gt; outputmsg_div',               'body &gt; table:nth-of-type(1)',               '#item_table',               'body &gt; table:nth-of-type(3)'           ], 100);       }       else if (iframePageIs('catalog_home.do')) {           return getTotalHeight([               'body &gt; outputmsg_div',               'body &gt; table:nth-of-type(1)',               '#homepage_grid'           ]);       }       else if (iframePageIs('$knowledge.do')) {           // Knowledge v3 UI           if ($('gsft_main').contentWindow.$j('body')[0].style.overflow != 'hidden') {                   $('gsft_main').contentWindow.$j('body')[0].style.overflow = 'hidden';           }           // Shrink iframe when the src changes to force a recalculation           if (src != $('gsft_main').contentWindow.location.href) {               src = $('gsft_main').contentWindow.location.href;               return 400;           }           return getTotalHeight(['.application'], 100);       }       else if (iframePageIs('assessment_take2.do')) {           // Resize Assessments           return getTotalHeight([               'form'           ], 100);       }       else {           // resize default           return getTotalHeight([               'body &gt; outputmsg_div',               '.section_header_div_no_scroll',               '.form_body',               '.navbar-fixed-bottom',               '.tabs2_spacer',               '.tabs2_list'           ], 100);       }   };   /**     * @function getTotalHeight     * @param {array} divs - Array of CSS selectors that identify the div's whose height should be added in the calculation     * @param {int} modifier - Number of additional pixels to add as a modifier     */   var getTotalHeight = function(divs, modifier) {       var h = 0;       $j.each(divs, function(ix, val) {               h = h + $('gsft_main').contentWindow.$j(val).height();       });       return h + modifier;   };   /**     * Determines if the url contains the given fragment     * @function iframePageIs     * @param {string} urlFragment - String to search for in the iframe url     *     */   var iframePageIs = function(urlFragment) {       return ($('gsft_main').contentWindow.location.href.indexOf(urlFragment) != -1);   };   /**     * A recursive polling function that gets the internal height of the iframe and resizes the it accordingly.     * @function resizeIframeFix     */   var resizeIframeFix = function() {       setTimeout(function() {           var curHeight;           if ($j &amp;&amp; $('gsft_main') &amp;&amp; $('gsft_main').contentWindow.$j) {               curHeight = getHeight();               if (prevHeight != curHeight) {                   $j('#gsft_main').height(curHeight);                   prevHeight = getHeight();               }           }           resizeIframeFix();       }, pollingDelay);   };   // Iniaite polling loop if we are on a top level CMS page   if (top == window &amp;&amp; window.location.href.indexOf(essUrl) != -1) {       addAfterPageLoadedEvent(function() {           // if resizable iframe exists           if ($('gsft_main')) {               resizeIframeFix();           }       });   }})();</pre>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.Via <a title="og.codecreative.io/" href="http://blog.codecreative.io/">Code Creative</a>

tltoulson · ‎07-14-2017

Hi Dinesh,

I would have to take a closer look at the specific code that you are using on your site. The most likely cause of the issue you are seeing is that the height of the measured divs within the iFrame is changing. This iFrame resize script only changes the height of the frame if the height of the contents changes. So I would need to take a closer look at the HTML, CSS, and JS of the contents of the iframe to see why the height is jittering.

renakhanna · ‎07-15-2017

Hi Travis

Thanks For Your Reply

I Deleted Below Script In Iframes.When I Deleted Below Script Problem Was Resolved.But I Dont No How It's Work.

(function() {

var contentWindow = '',

iframeArray = [],

pollingDelay = 250,

prevHeight,

src = '',

blacklist = [],

bottomMargin = 30;

/**

* 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

* @function getHeight

*/

var getHeight = function() {

if (contentWindow.$j('body')[0].style.overflow != 'hidden') {

contentWindow.$j('body')[0].style.overflow = 'hidden';

}

//if (iframePageIs('$knowledge.do') || iframePageIs('knowledge_home_launcher.do')) {

if (iframePageIs('$knowledge.do')) {

// Knowledge v3 UI

// Shrink iframe when the src changes to force a recalculation

if (src != contentWindow.location.href) {

src = contentWindow.location.href;

return 700;

}

return getTotalHeight(['.application'], 0);

}

else if (iframePageIs('kb_view.do')) {

return getTotalHeight([

'body > .outputmsg_div',

'body > .navbar',

'.kb-view-content-wrapper',

'.snc-article-header-author',

'.snc-article-footer-section',

'.snc-article-footer'

], 0);

}

else if (iframePageIs('kb_home.do')) {

return getTotalHeight([

'body .navbar',

'body > .kb_main'

], bottomMargin);

}

else

return null;

};

/**

* @function getTotalHeight

* @param {array} divs - Array of CSS selectors that identify the div's whose height should be added in the calculation

* @param {int} modifier - Number of additional pixels to add as a modifier

*/

var getTotalHeight = function(divs, modifier) {

var h = 0;

$j.each(divs, function(ix, val) {

h = h + contentWindow.$j(val).height();

});

return h + modifier;

};

/**

* Determines if the url contains the given fragment

* @function iframePageIs

* @param {string} urlFragment - String to search for in the iframe url

*

*/

var iframePageIs = function (urlFragment) {

return (contentWindow.location.href.indexOf(urlFragment) != -1);

};

/**

* A recursive polling function that gets the internal height of the iframe and resizes the it accordingly.

* @function resizeIframeFix

*/

var resizeIframeFix = function(iframe) {

setTimeout(function() {

var curHeight;

var i;

for (i = 0; i < blacklist.length; i++) {

if (iframePageIs(blacklist[i])) {

return;

}

if ($j && contentWindow.$j) {

curHeight = getHeight();

if (curHeight !== null && prevHeight != curHeight) {

$j(iframe).height(curHeight);

prevHeight = getHeight();

}

resizeIframeFix(iframe);

}, pollingDelay);

};

// Initiate knowledge page resize if we are in iframe and not in platform UI iframe

if (top != window && top.location.pathname != '/navpage.do' && top.location.pathname != '/nav_to.do') {

//detect end of page - scrolling

$j(top).scroll(function() {

if(top && typeof angular !== 'undefined'){

if($j(top).scrollTop() + $j(top).height() == $j(top.document).height()) {

var articleScope = angular.element($j('div[articles-container]')[0]).scope(),

searchScope = angular.element($j('.search-results')[0]).scope();

if(articleScope)

articleScope.$parent.$parent.getArticlesAndQuestions();

if(searchScope)

searchScope.$parent.$parent.executeSearch(searchScope.filterQuery.keywords);

}

});

//resizing

parent.addAfterPageLoadedEvent(function() {

contentWindow = window; //iframe window

resizeIframeFix(parent.window.$j('iframe'));

});

}

})();

Thanks

Dinesh

Ben Collyer · ‎09-10-2017

Nice piece of work!

For Wizards (if anyone still uses these) add and if else block like this:

else if (iframePageIs('expert_shell.do')){ //Wizards return getTotalHeight([ 'body' ], 200); }

tltoulson · ‎09-15-2017

Thanks Ben! I have added your changes to the Gist and can confirm that it works without issue.

jperoz · ‎10-11-2017

Hi Travis,

We are testing Jakarta and the global search returns a cut off page with two scroll bars. I have tried to implement your code above, but it has know effect. The search results page returned is called main_content.do, so I added this to your script. It still doesn't work. We are still using CMS.

tltoulson · ‎10-11-2017

Hi James,

Sorry to hear it's not working out for you. It sounds like you've got some customizations as the out of box CMS does not have a main_content.do page. I think we can get this script to work for you by adding a configuration specifically for main_content.do in the script but we'll have to determine which HTML divs make up the height of the page. It will probably be easiest if we can work together over a screen share / call. Shoot me an email @ tltoulson@gmail.com if you want to arrange.

At the very least, explaining how to determine the correct configuration will be easier on a call than typing it out! 😄

How to Fix CMS iFrame Resizing in ServiceNow

Recognising the types of users that access your instance

What’s on Your CreatorCon Wishlist for Knowledge26?

Data at the Core—Integrations, Federations, and Workflow Data Fabric