Projet Socle ENT
Pages enfant
  • Retaillage d'iframe

Vous regardez une version antérieure (v. /wiki/display/ESUPMU/Retaillage+d%27iframe) de cette page.

afficher les différences afficher l'historique de la page

« Afficher la version précédente Vous regardez la version actuelle de cette page. (v. 5) afficher la version suivante »

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. Ne fonctionne pas avec IE6/IE7 qui ne gèrent pas postMessage)

Le portail qui reçoit la hauteur du contenu des iframes et ajuste la hauteur de l'iframe.
Cette solution fonctionne avec toutes les applications testées, même celles utilisant de l'ajax pour construire la page affichée.

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 : 
    <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/)
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" />
  • Aucune étiquette