title: Registering iframe events in Internet Explorer
body: <p>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.</p>
  <p>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 <code>setContainerHeight</code> is what does this re-sizing.</p>
  <p>The problem -</p>
  <p>Internet Explorer does not call my JS method which does this re-size!</p>
  <p>I suspect that the following post could help with this problem.
  <a href="https://stackoverflow.com/questions/960419/javascript-ie-event">Javascript IE Event</a></p>
  <p>Chrome, Firefox, Opera....all do!</p>
  <p>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?</p>
  <p>In case anyone was curious - this is my re-size method:</p>
  <pre><code>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 &amp; 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';
  }
  </code></pre>
  <p>And this is the section of the code that calls this method -</p>
  <pre><code>/* 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(); };
  </code></pre>
  <p>A bit more information -<br />
  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?</p>
  <p>I suspect that the following post could be useful in my search for the answer to this problem --</p>
  <p><a href="https://stackoverflow.com/questions/960419/javascript-ie-event">Javascript IE Event</a></p>