Retaillage d'iframe

Un des problèmes principaux quand on intègre en iframe est le dimensionnement de l'iframe. Si le contenu de l'iframe est un peu grand ou évolue on risque un double ascenseur : un ascenseur pour la iframe et un ascenseur pour la page.

Il existe des solutions sans modifier de XSL, uniquement au niveau javascript et jquery :

• 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 ou d'utiliser un reverse proxy.

Dimensionner l'iframe à la taille de la fenêtre

(nb : pour uPortal 3.2)

Pour gagner de la place, cette solution cache le "footer" des pages contenant une iframe.

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

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 contenu.

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 ?)

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

<js>javascript/use-iframe-autoheight-plugins.js</js>
<js>javascript/document-domain-univ-xxx.js</js>

Mettre le fichier use-iframe-autoheight-plugins.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

(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);