Question

I have a web application that allows users to enter search criteria and the results get appended to a portlet container right below the input fields for the search criteria (mentioned above).
Environment – JSP, JAVA, and TAG libraries
The search page essentially consists of a few JSP pages which reference a myriad tag libraries.

After the search results are returned (AJAX) – the portlet iframe should re-size based on the new height. A JavaScript method (resident to one of the tag libraries) called setContainerHeight is what does this re-sizing.

The problem –

Internet Explorer does not call my JS method which does this re-size!

I suspect that the following post could help with this problem.
Javascript IE Event

Chrome, Firefox, Opera….all do!

Since I cannot explicitly tell the page to refresh (I will loose my search criteria parameters), nor can I explicitly check what type of browser is making the request (my JavaScript is not getting called); how can I explicitly tell the page to call my resize method after the callback?

In case anyone was curious – this is my re-size method:

function setContainerHeight() {
  //reset the height to shrink the scroll height for the usecase where the portlet's contents got smaller.

  getPortlet().style.height = '${frameHeight}px';
  getPortlet().height = '${frameHeight}px';

  try {
     height = getFrameHeight(getPortlet());
  } catch (e) {
    //fallback for crossdomain permission problems.
    height = '${frameHeight}';
  }

  //set the portlet & portlet container to be the same height - not using 100% for the portlet to avoid the inner scrollbar
  try {
    getPortletContainer().style.height = height + 'px';
  } catch ( ex ) {
      // do nothing, we can't get to the container
  }
  getPortlet().style.height = (height + getHorScrollBarHeight()) + 'px';
  getPortlet().height = (height + getHorScrollBarHeight()) + 'px';
}

And this is the section of the code that calls this method –

/* resizes the portlet container to fit the size of the porlet. */
function resizePortletContainer() {

  if (hasContainerHeightChanged()) {
    saveScrollPosition();
    setContainerHeight();
    restoreScrollPosition();
  }

  //width handling needs some work
  //if (hasContainerWidthChanged()) {
    //setContainerWidth();
  //}
}

//registering event handlers...
var frame = getPortlet();
var prevPortletLoadEvent = frame.onload ? frame.onload : function () {};
frame.onload = function () {prevPortletLoadEvent(); resizePortletContainer(); };

var prevPortletResizeEvent = frame.onresize ? frame.onresize : function () {};
var onresize = function () {prevPortletResizeEvent(); resizePortletContainer(); };

A bit more information –
After placing alert statements after the register event handler code above; I noticed that both IE and Firefox called this portion of code only ONCE (my alert box was triggered only once in either case when the initial search screen was displayed to the browser.) Thus, that leads me to believe that for some reason, only Firefox likes the above code that I am using to register my events; IE perhaps is looking for a different method of registering this event?

I suspect that the following post could be useful in my search for the answer to this problem —

Javascript IE Event

Answer 1

I found my answer in another post, but essentially the problem was that Internet Explorer registers its iframe events differently than all other browsers.
Also a good post for you to look at – iframe behaviour of onload vs addEventListener('load')

The code that I used to fix the problem is listed below. I hope this helps someone else that gets into a similar problem I had.

I had to do a simple check on what browser was making the request and the 2 conditional blocks that you see below do the same thing, except the syntax is different for IE. Good ‘ol IE. LoL.

//Microsoft Internet Explorer Browser - iFrame event register
if (navigator.appName.indexOf("Microsoft") != -1) {
  var frame = getPortlet();
  var prevPortletLoadEvent = frame.onload ? frame.onload : function () {};
  var refresh = function() { prevPortletLoadEvent(); resizePortletContainer(); };

  if(frame.attachEvent) frame.attachEvent('onload', refresh);
  else frame.addEventListener('load', refresh, false);
}

//All other major browsers - iFrame event register
else {
  var frame = getPortlet();
  var prevPortletLoadEvent = frame.onload ? frame.onload : function () {};
  frame.onload = function () {prevPortletLoadEvent(); resizePortletContainer(); };

  var prevPortletResizeEvent = frame.onresize ? frame.onresize : function () {};
  var onresize = function () {prevPortletResizeEvent(); resizePortletContainer(); };
}