Historique de la page

...

• Une solution consiste à dimensionner dynamiquement l'iframe de la taille de la fenêtre du navigateur pour éviter l'ascenseur pour la page.
• Une autre solution consiste à dimensionner dynamiquement l'iframe de la taille du contenu de l'iframe pour éviter l'ascenceur de la iframe. Cette solution permet d'afficher les iframes de la même façon que les autres canaux, mais cette solution est plus complexe car elle nécessite de forcer le document.domain d'ajouter un js dans les pages de l'application ou d'utiliser un reverse proxy.

...

Au niveau du (ou des skins) dans le fichier skin.xml ajouter :

<js>javascript/iframe-resize-plugins.js</js>

Mettre le fichier iframe-resize-plugins.js dans le dossier "javascript" du skin (ex : custom/uPortal/uportal-war/src/main/webapp/media/skins/universality/common/javascript/)

 /*********************************************

Resize d'iframe

*********************************************/
(function($){
       $$(document).ready(function(){

    
        var        var resizeFrames = function() {
            $            $('iframe').each(function(){            
                var
                var height_window = $(window).height();
                
                
                // do not open other iframe
                                // direct child of up-portlet-content-wrapper-inner
                if                if($(this).parent().get(0).className == 'up-portlet-content-wrapper-inner') {
                    newHeight                    newHeight = height_window-210;
                    this                    this.height=newHeight+"px";
                
                    $
                    $('#portalPageFooter').hide();
                }
                            }
            });
        }
        
        $        }

        $(window).resize(function() {
            resizeFrames            resizeFrames();
                });

        resizeFrames        resizeFrames();
       });
})(jQuery);

Dimensionner l'iframe à la taille de son contenu

(nb : testé avec uPortal 3.2 et tous les navigateurs testés : Firefox 3.6, Chrome 8.0, Safari, IE 8). Ne fonctionne pas avec IE6/IE7 qui ne gèrent pas postMessage)

Le portail reçoit la hauteur Voici une solution similaire à celle de Vincent Bellenger mais plus simple : ce n'est pas le contenu de l'iframe qui modifie le height de l'iframe, c'est le portail qui reçoit les mises à jour du contenu des iframes et qui demande la taille du contenuajuste la hauteur de l'iframe.
Cette solution nécessite que l'ENT et l'application mise en iframe soient sur le même domaine et il faut modifier l'application : ajouter

<script type="text/javascript"> document.domain = "univ-xxx.fr"; </script>

dans toutes les pages (header ou footer ou ...)

Cette solution fonctionne bien pour des pages simples (filex, Saisie de Notes en Ligne de l'amue...) et peut être couplée à la première solution pour les applications ne pouvant pas être modifiées avec document.domain ou posant des problèmes (par exemple fckeditor ?)

...

fonctionne avec toutes les applications testées, même celles utilisant de l'ajax pour construire la page affichée. Voici une page de test.

Cette solution nécessite que toutes les pages de l'application aient un DOCTYPE (dans le cas contraire, il est souvent possible d'en ajouter un)

Installation

Dans le portail

• ajouter dans le fichier skin.xml

...

• :

  Bloc de code

...

• <js>javascript/use-iframe-autoheight-

...

• using-postMessage.js</js>

...

• mettre le fichier use-iframe-autoheight-

...

• using-postMessage.js dans le dossier "javascript" du skin (ex : custom/uPortal/uportal-war/src/main/webapp/media/skins/universality/common/javascript/)

document.domain = "univ-xxx.fr";

Mettre le fichier use-iframe-autoheight-plugins.js dans le dossier "javascript" du skin

Sur un serveur web

Installer postMessage-resize-iframe-in-parent.js pour le rendre accessible aux applications (ex : http://xxx.univ.fr/zzz/postMessage-resize-iframe-in-parent.js).

Dans l'application

Ajouter dans les pages (dans le header ou footer ou ...) :

<script src="http://xxx.univ.fr/zzz/postMessage-resize-iframe-in-parent.js" />

Une fonctionnalité supplémentaire pour l'intégration en iframe est la possibilité d'avoir du CSS spécifique quand l'application est intégrée en iframe. Pour cela, il faut mettre

<script type="text/javascript">
window.cssToLoadIfInsideIframe = "https://esup-data.univ-paris1.fr/esup/canal/css/XXXX.css";
</script>
<script src="https://esup-data.univ-paris1.fr/esup/outils/postMessage-resize-iframe-in-parent.js"></script>

(function($){
    $(document).ready(function(){
            
        var resizeFrame = function(frame) {
                var height = $(frame).contents().find("html").attr('scrollHeight');
                if (height === undefined) return;

                // for firefox, one could use $(frame).contents().find("html").height() which works without needing to set height to 0 first
                $(frame).css({height: 0});

                var height = $(frame).contents().find("html").attr('scrollHeight');
                if (height > 0) {
                    var horiz_scroll_heigth = 20;
                    $(frame).css({height: height + horiz_scroll_heigth});
                }
        };
  
        $('iframe').load(function() {
            resizeFrame(this);
        });
    });
})(jQuery);