[Javascript] quelques astuce de compatibilité

12 April 2011
Uncategorized
Comments Off

Accéder à la fenêtre parent avec Opéra

Un petit truc à ce rappeler sur Opéra : lorsqu’un script ce trouve dans une iframe veut appeler une fonction qui se situe dans la fenêtre parent : parent.foo(); la fonction foo() doit obligatoirement se trouver dans le <head> sinon l’appel echoue.

iframe Cross Domain et cookie de session

Si vos utilisateur sont logué sur un site hébergé sur un serveur A, lorsqu’une page d’un serveur B insert une iframe du site A, l’iframe n’a pas accés au cookie de session, l’utilisateur n’est donc pas logué, et parfois même cela réinitialise la session sur le serveur A. Une technique simple consiste a passé par une page intermédiaire i.php.

fenetreSurB.php


<body>
<iframe src="http://A/i.php?page=pageSurA.php"></iframe>
</body>

i.php


<body>
<div id="content">
</div>
<script type="text/javascript">
$.post("http://A/<?php echo $_GET['page'];  ?>",
function(d)
{
$('#content').html(d);
});
</script>
</body>

voilà , ainsi l’utilisateur apparaît comme connecté dans l’iframe.

plugin jQuery backgroundPosition + hack Opéra

Le plugin http://plugins.jquery.com/project/backgroundPosition-Effect permet d’animer correctement backgroundPosition dans jQuery. Mais dans Opéra qui ne connait pas background-position-x et background-position-y, l’animation d’un des deux composantes reste impossible d’où une version modifier du plugin que l’on utilise de la façon suivante :


$('.element').animate({backgroundPosition: 'initial 40px'},'fast');
// anime baground-position-y jusqu'a 40px

$('.element').animate({backgroundPosition: '40px initial'},'fast');
// anime baground-position-x jusqu'a 40px


/**
 * @author Alexander Farkas
 * v. 1.21
 */

(function($) {
 if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
 var oldCurCSS = jQuery.curCSS;
 jQuery.curCSS = function(elem, name, force){
 if(name === 'background-position'){
 name = 'backgroundPosition';
 }
 if(name === 'background-position-x'){
 name = 'backgroundPositionX';
 }
 if(name === 'background-position-y'){
 name = 'backgroundPositionY';
 }
 if((name !== 'backgroundPosition')  || !elem.currentStyle || elem.currentStyle[ name ]){
 return oldCurCSS.apply(this, arguments);
 }
 var style = elem.style;
 if ( !force && style && style[ name ] ){
 return style[ name ];
 }
 return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force);
 };
 }

 var oldAnim = $.fn.animate;
 $.fn.animate = function(prop){
 if('background-position' in prop){
 prop.backgroundPosition = prop['background-position'];
 delete prop['background-position'];
 }
 if('backgroundPosition' in prop){
 prop.backgroundPosition = '('+ prop.backgroundPosition;
 }
 if('background-position-y' in prop){
 prop.backgroundPositionY = prop['background-position-y'];
 delete prop['background-position-y'];
 }
 if('backgroundPositionY' in prop){
 prop.backgroundPositionY = '('+ prop.backgroundPositionY;
 }
 if('background-position-x' in prop){
 prop.backgroundPositionX = prop['background-position-x'];
 delete prop['background-position-x'];
 }
 if('backgroundPositionX' in prop){
 prop.backgroundPositionX = '('+ prop.backgroundPositionX;
 }

 return oldAnim.apply(this, arguments);
 };

 function toArray(strg){
 strg = strg.replace(/left|top/g,'0px');
 strg = strg.replace(/right|bottom/g,'100%');
 strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
 var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
 return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
 }

 $.fx.step. backgroundPosition = function(fx) {
 if (!fx.bgPosReady) {
 var start = $.curCSS(fx.elem,'backgroundPosition');

 if(!start){//FF2 no inline-style fallback
 start = '0px 0px';
 }
 start = toArray(start);

 fx.start = [start[0],start[2]];

 var res = fx.options.curAnim.backgroundPosition.match(/([0-9\-\.a-z\%A-Z]+) ([0-9\-\.a-z\%A-Z]+)/);

 var initial=[res[1]=='initial', res[2]=='initial'];

 fx.isInitalValue=initial;

 fx.options.curAnim.backgroundPosition=fx.options.curAnim.backgroundPosition.replace('initial','0px');
 var end = toArray(fx.options.curAnim.backgroundPosition);
 fx.end = [initial[0]?start[0]:end[0],initial[1]?start[2]:end[2]];

 fx.unit = [initial[0]?start[1]:end[1],initial[1]?start[3]:end[3]];
 fx.bgPosReady = true;
 }
var nowPosX = [];
 nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
 nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
 fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

 };

})(jQuery);

Comments are closed.