Projet Socle ENT
Pages enfant
  • 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 d'ajouter un js dans les pages de l'application 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 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. 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 :

    <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" />

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>
  • Aucune étiquette