javascript :: Iframe Höhe und prototype

Iframe passt sich mit der Höhe von Inhalt nicht automatisch an. Dafür muss man was programmieren.
Die Schwirigkeit ist da, dass jeder Browser eigene Einstellung für ansprechen mit IFRAME hat.

Zu erst Anpassung die Höhe von IFRAME in verschiedene Browser durch JavaScript:


function getWindowHeight() {
    var frameSize = document.body.offsetHeight;
    if(document.all && !window.opera) {          
      frameSize = document.body.scrollHeight;
    }
    else {
      var frameSize = document.body.offsetHeight;
    }
    return frameSize;
}
Nächstes Problem ist die Anpassung der Höhe wenn Ajax im Betrieb ist.
Dafür haben wir folgendes Trick ausgedacht.
Wir werden bei jeder Click in IFRAME einen Event in Parent aufrufen (iResize). Die Höhe kann als Parameter abgegeben werden.

SHOP SYSTEM (common.js):

jQuery.noConflict();
if (document.addEventListener) {  
    // FIREFOX & OTHERS
    document.addEventListener("click", function(event){    parent.jQuery(parent.document).trigger("ecs.typo3.iframe.click",event.target); }, true);
} else {
    // IE
    document.attachEvent("click", function(event){parent.jQuery(parent.document).trigger("ecs.typo3.iframe.click",event.target); }, true);
}

function getWindowHeight() {
    var frameSize = document.body.offsetHeight;
    if(document.all && !window.opera) {  
          // FIREFOX & OTHERS
      frameSize = document.body.scrollHeight;
    }
    else {
          //IE
      var frameSize = document.body.offsetHeight;
    }
    return frameSize;
}

function ecsTypo3IframeReload() {
    parent.jQuery(parent.document).trigger("ecs.typo3.iframe.reload",getWindowHeight());
}
                    
jQuery(document).ready(function(){
    ecsTypo3IframeReload();
});

UND HIER DIE STELLE IN PROTOTYPE (BRV : Brbasiclayout.tml):

function hidePleaseWait() {
   if (activateLoadingOverlay) {
    $('loading').hide();
    $('overlay').hide();
        ecsTypo3IframeReload();
   }                
};


Diese Funktion wird in Paretn aufgerufen (iframe.js):

function iResize(height) {
  var iFrames = document.getElementsByTagName('iframe');
  for (var i = 0, j = iFrames.length; i < j; i++)
  {
     iFrames[i].style.height = height + 20 +'px';
  }
}

$(document).bind('ecs.typo3.iframe.reload', function(event, param) {
       iResize(param);
});

   
$(document).bind('ecs.typo3.iframe.click', function(event, param) {
  switch (param.tagName) {
    case "A":
        break;
    case "INPUT":
        break;
    default:
                break;
  }
});