Retailler automatiquement les canaux iFrame pour éviter les doubles ascenceurs
Pour des raisons de confort pour l'utilisateur, on retaille les canaux de façon à supprimer les doubles assenceurs. Cette page présente une méthode possible pour les applications PHP.
Pour d'autres solutions (expliquées pour uportal 3.2), voir Retaillage d'iframe.
Version concernée :
uPortal-esup et esupdev 2.6 versions ALM et DLM
Patcher la classe CInlineFrame
Patcher la class CInlineFrame de façon à rajouter un nom à la frame (c'est plus simple si on en a plusieurs sur la même page),
--- CInlineFrame.java 2008-12-09 10:14:52.000000000 +0100
+++ CInlineFrame.java.new 2008-12-09 10:15:12.000000000 +0100
@@ -51,6 +51,7 @@
// Obtain url and height, both static parameters
String srcUrl = staticData.getParameter("url"); // the url for the IFrame content
String frameHeight = staticData.getParameter("height"); // the height of the IFrame in pixels
+ String iFrameName = staticData.getParameter("iFrameName"); // the name of the IFrame in pixels
Document doc = null;
try {
@@ -62,12 +63,19 @@
// Create XML doc
Element iframeE = doc.createElement("iframe");
+
Element urlE = doc.createElement("url");
urlE.appendChild(doc.createTextNode(srcUrl));
iframeE.appendChild(urlE);
+
Element heightE = doc.createElement("height");
heightE.appendChild(doc.createTextNode(frameHeight));
iframeE.appendChild(heightE);
+
+ Element iFrameNameE = doc.createElement("iFrameName");
+ iFrameNameE.appendChild(doc.createTextNode(iFrameName));
+ iframeE.appendChild(iFrameNameE);
+
doc.appendChild(iframeE);
XSLT xslt = XSLT.getTransformer(this, runtimeData.getLocales());
@@ -105,4 +113,4 @@
sbKey.append("locales:").append(LocaleManager.stringValueOf(runtimeData.getLocales()));
return sbKey.toString();
}
-}
\ Pas de fin de ligne à la fin du fichier.
+}
Paramétre à ajouter dans le pubChan
On définit le nom de la frame qui sera utilisé dans la feuille de randu
<parameter>
<name>iFrameName</name>
<value>nomdeliframe</value> ==> nom de la frame qui sera utilisé dans les applications pour la retailler
<description></description>
<ovrd>N</ovrd>
</parameter>
Modifier la feuille Iframe.xsl de façon a ajouter le nom du canal
<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:param name="locale">en_US</xsl:param>
<xsl:template match="iframe" >
<iframe src="{url}" height="{height}" name="{iFrameName}" id="{iFrameName}" frameborder="0" width="100%">
This browser does not support inline frames.<br/>
<a href="{url}" target="_blank">Click here to view content</a> in a separate window.
</iframe>
</xsl:template>
</xsl:stylesheet>
Modifier la feuille xhtml-theme.xsl de façon à définir le domaine
Ajouter dans le bloc javascript (ligne 26, 65, 141 suivant si on est connecté ou pas ) la ligne :
document.domain="domaine.univ.fr";
Modifier les applications PHP
1 - declarer la variable $iFrameName qui correspond au parametre défini dans le pubchan.
Pour certaines applis qui comporte des frames ca ne fonctionne pas alors j'ai declarer la variable $iFrameHeight qui force la hauteur de la page
2 - ajouter dans l'entete de page :
<script type="text/javascript">
document.domain="domaine.univ.fr";
function resizeIframe(maframe){
if (navigator.userAgent.indexOf('Safari') == -1) {
var height = document.body.scrollHeight + 35; // (on ajoute + 35 car le calcul de la page peut varier, sur le meme navigateur ca peut se jouer et quelques px)
}
else{
var height = document.body.offsetHeight + 35;
}
<? if (isset($iFrameHeight) && $iFrameHeight != "") echo "\nheight=$iFrameHeight;\n"; ?>
maframe.style.height = height +"px";
};
</script>
3 - ajouter dans le pied de page :
<script type="text/javascript">
document.domain="domaine.univ.fr";
try{
maframe = parent.document.getElementById('<?=$iFrameName?>');
maframe.onload = resizeIframe(maframe);
window.onresize = resizeIframe(maframe);
}
catch(e){}
</script>
La partie ajoutée dans l'entete pourait etre fait dans le pied, mais si on veut agrandir la taille quand on clic un menu déroulant type arbre, il faut que la fonction soit connue.
C'est tout, c'est relativement simple a mettre en place mais demande bcp de travail pour repasser dans toutes les applis et que celles ci soit bien formatées.
Notes:
Si vous utilisez FCKeditior, il faut alors le mettre a jour, la notion de domaine n'est prise en compte qu'a partir de la v 2.6.3.
Preciser votre nom de domaine dans le fichier de constantes : editor/_source/fckconstants.js
var FCK_RUNTIME_DOMAIN = "domaine.univ.fr";
Modifier Moodle (v1.9)
C'est un peu plus et ca ne fonctionne pas sous IE qui pose des probleme avec l'editeur utiliser (cet éditeur devrait changer dans la v2), on test donc le test de navigateur.
1- Déclarer le domaine dans l'entête des pages.
Ajouter dans theme/votre-themes/header.html (ligne 9)
<script type="text/javascript">
if (navigator.appName != "Microsoft Internet Explorer"){ document.domain="domaine.univ.fr"; }
</script>
2 - Calculer la hauteur de la page et retailler
Ajouter dans theme/votre-themes/footer.html (ligne 30)
<script type="text/javascript">if (navigator.appName != "Microsoft Internet Explorer"){
document.domain="domaine.univ.fr";
maframe = parent.document.getElementById('CMoodle'); // nom de la frame déclaré dans le pubchan (ici : CMoodle)
function resizeIframe() {
if (navigator.userAgent.indexOf('Safari') == -1) {
var height = document.body.scrollHeight + 35; // (on ajoute + 35 car le calcul de la page peut varier, sur le meme navigateur ca peut se jouer et quelques px)
}
else{
var height = document.body.offsetHeight + 35;
}
maframe.style.height = height +"px";
};
maframe.onload = resizeIframe;
window.onresize = resizeIframe;
}</script>
L'éditeur de texte utilisé dans les forums, wiki, devoirs, bases de données, étiquettes... présente alors ses dysfonctionnements : - impossible d'ajouter une URL, - d'ajouter une image, - d'ouvrir en pleine fenêtre. Il faut définir le domaine dans les fichiers suivants :
- lib/editor/htmlarea/popups/popup.js (ligne 15)
- lib/editor/htmlarea/coursefiles.php (ligne 54)
- lib/editor/htmlarea/popups/fullscreen.php (ligne 24)
la ligne à ajouter est :
if (navigator.appName != "Microsoft Internet Explorer"){ document.domain="domaine.univ.fr"; }
Une autre correction est nécessaire pour l'ouverture en plein écran (popup) de l'éditeur. Il s'agit d'ajouter "parent" devant "opener.HTMLArea._object" dans le fichier :
- lib/editor/htmlarea/popups/fullscreen.php (ligne 120)
Remplacer parent_object = opener.HTMLArea._object; par parent_object = parent.opener.HTMLArea._object;
Pour voir ce que ca donne vous pouvez allez sur notre ent (ent.bretagne.iufm.fr), le canal "Votre nouvel Espace Numérique de Travail" inclus cette modif, ainsi que le menu "Aide"
Commentaire
Dominique LALOT dit :
La doc n'est pas très claire. Le portail ayant plein d'iframe du domaine univ.fr, il faut indiquer document.domain=univ.fr
Il semble que les dernières versions d'IE8 soient encore moins permissives qu'avant. Le fait de mettre les patch nous a mis à mal pour notre ENT. Le helpdesk par exemple utilise fckeditor (ainsi que beaucoup d'autres canaux). On ne pouvait plus créer ou clore un ticket!
On peut donc dire que ce document ne concerne pratiquement plus que FireFox.
Pour ne pas planter vos utilisateurs, dans xhtml-theme.xsl, mettre ceci:
if (navigator.appName != "Microsoft Internet Explorer"){ document.domain="domaine.univ.fr"; } à la place de document.domain="domaine.univ.fr";Les utilisateurs génés par les doubles ascenseurs doivent apprendre à détacher la frame. C'est beaucoup plus sûr.
En plus pour horde/dimp, il n'y a pas de footer ou de header pour envoyer du code javascript. C'est donc beaucoup de travail pour peu d'applications avec des risques de blocages.